做广告的软件app_成都广告设计公司排行_独立站网站_小程序定制开发

模板

<uni-forms-item label="营业执照" required name="xkz_pic"><view class="example-body"><uni-file-picker v-model="fileLists" file-mediatype="image" file-extname="png,jpg,jpeg":image-styles="imageStyles":limit="1"title="上传营业执照,图片大小不超过2M的文件"@select="uploadSelect" @success="uploadSuccess"@fail="uploadFail" @delete="uploadDel"></uni-file-picker></view></uni-forms-item>

javascript

//更新营业执照，必须使用computed，如果使用接口返回的图片地址，图片不会渲染
const fileLists=computed({//取值get(){let list = [];let url=baseurl+dataFormAdd.xkz_piclet extname=url.substring(url.lastIndexOf(".")+1)let item={url: url,extname: extname,name: 'yyzz'+extname}if(dataFormAdd.xkz_pic){list.push(item)}return list},//设置值set(value){console.log('设置值',value)console.log(value.length)if(value.length==0){dataFormAdd.xkz_pic=''}}})
//核心代码，选择图片const uploadSelect=(e)=>{console.log('选择图片',e)//#ifdef H5// h5上传-需要文件file对象const tempFilePaths = e.tempFiles[0].file;//#endif//#ifdef MP-WEIXIN// 微信小程序上传-需要微信临时提供临时地址const tempFilePaths = e.tempFilePaths;//#endifconsole.log('临时路径',tempFilePaths[0],uploadPicAction)//上传文件uni.uploadFile({//#ifdef H5url:uploadPicAction,//#endif//#ifdef MP-WEIXINurl: 'http://www.baidu.cn/upload/uploadimage',//#endif// 要上传文件对象-h5和微信小程序上传参数不一样只能存在一个// H5上传//#ifdef H5file: tempFilePaths,//#endif//#ifdef MP-WEIXIN// 微信小程序上传filePath: tempFilePaths[0],//#endif//文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容name: 'file',// 请求头设置// 我们是需要token和用户id登录时存从uni-app数据存储中取// header: {//     "token": uni.getStorageSync('token'),//     "tenant-id": uni.getStorageSync('tenant-id')// },// 成功函数success: (res) => {// uni.uploadFile默认在外面包了一层dataconsole.log('上传成功', res.data);// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象console.log('上传数据转换',JSON.parse(res.data));// 取到文档服务器的值let uploaddata = JSON.parse(res.data)let url=uploaddata.data.urllet x = {}// 下面3个值是uni-app规定的一个不能少x.url = urlx.extname = url.substring(url.lastIndexOf(".")+1)x.name = '营业执照'dataFormAdd.xkz_pic=url//fileLists.value.push(x)//fileLists.push(x)//fileLists.value=x//console.log('文件列表',fileLists.value, x,dataFormAdd)},// 失败提示用户重新上传fail: error => {console.log('失败', error);}})}
//删除图片const uploadDel=(e)=>{console.log('删除图片',e)//dataFormAdd.xkz_pic=''
}//上传成功
const uploadSuccess=(e)=>{//没有uniCloud上传空间，不会触发，当时这个地方困扰了好久，所以没有上传空间，只能通过uploadSelect来实现上传控制console.log('上传成功',e)
}//上传失败
const uploadFail=(e)=>{//没有uniCloud上传空间，不会触发console.log('上传失败',e)
}