注:使用的uview 的upload 组件,其他框架upload 类似。
<u-upload
:max-count="10" //最大选择图片的数量
multiple //是否可以多选
:auto-upload="false" //关闭自动上传
ref="uUpload"
:action="'#'" //因为<upload>的action属性是必须的,所以如果不用默认上传,这里随便设置一个字符串就可以了。
@on-list-change="uploadChange"//当内部文件列表被加入文件、移除文件,或手动调用clear方法时触发
></u-upload>
<u-button type="primary" @click="submit" style="background-color:#2672cb;">确认提交</u-button>
data() {
return {
fileList: [],
fd:{}
};
},
// 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
uploadChange(lists, name) {
this.fileList = lists;
},
submit() {
//一次请求上传多张图片,可以把数据存在FormData 里面
const fd=new FormData();
// 上传图片同时要附带的参数
fd.append('tid', this.tid);
fd.append('uid', this.use.id);
fd.append('type', this.typeList[0].id);
fd.append('bid',this.typeList[1].id);
fd.append('sid', this.typeList[2].id);
fd.append('lon', this.lon);
fd.append('lat', this.lat);
fd.append('address', this.form.intro);
fd.append('memo', this.form.textDescribe);
fd.append('createuserid', this.use.createuserid);
//上传的文件进行循环
this.fileList.forEach( (file) => {// 因为要上传多个文件,所以需要遍历
this.fd.append('files', file.file)
})
axios.post(this.action, this.fd).then((res)=> {
uni.showToast({
title:res.data.message,icon:'none'
})
if(res.data.responseCode===0){
this.form={};
this.typeList= [{ name: '请选择' }];
this.numList= [{ name: '请选择' }];
this.fileList= [];
this.$refs.uUpload.clear();
}
})
},