新建页面 和编辑页面 为同一个html
html里面多张图片上传 删除
(主要是通过uid 来对图片数组fileList5进行更新 删除)
(fileList5里面图片对象的url 都换成oss返回的图片url 替换掉之前的blob 统一起来更好处理 submit的时候可以直接取fileList5的数据)
(扔掉elemen-ui上传图片自带的fileList5里面的url 换成可以对接接口的url)
html:
<el-form-item label="认证文件" class='not-require'>
<el-upload action="" :before-upload='beforeUpload' :http-request="handleSuccessList5" :on-change="handleChange5" :file-list="fileList5" :on-remove='remove5' list-type="picture" multiple :limit='3'>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">每张图片大小不超过1M</div>
</el-upload>
</el-form-item>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
multiple 表示多选
:limit='3' 限制传3张
js:
//图片改变时 将图片数据push到fileList5中
handleChange5(file, fileList) {
this.fileList5.push(file)
},
此时fileList5
图片上传成功
handleSuccessList5(file) {
var file;
if (files.raw) { file = files.raw }else{file = files.file;}
//图片上传到oss
this.axios.get('/api/admin/vendor/uploadToken?path=images/').then(res =>{
var form = new FormData
form.append('name', file.name)
form.append('key', res.dir + '${filename}')
form.append('policy', res.policy)
form.append('OSSAccessKeyId', res.accessid)
form.append('success_action_status', '200')
form.append('signature', res.signature)
form.append('file', file, file.name)
this.axios({
method: 'post',
url: res.host,
data: form,
}).then(respond=>{
var url_img = 'https:' + res.host + '/' + res.dir + file.name
//handleChange5时已经将图片信息传入到fileList5中了 有当前图片的uid和url 但是url是blob形式的
//因为是多张图片 所以fileList5数组有多个值 循环通过uid 替换掉当前图片的url 将blob换成oss形式的图片
for (var i = 0; i < this.fileList5.length; i++) {
if (this.fileList5[i].uid == file.uid) {
this.fileList5[i].url = url_img
}
}
})
})
},
//删除图片 点击叉叉删除
remove5(file,fileList){
//同样是通过uid 找到对应的图片对象 删除数组中的这个图片对象
//参数file里面有uid,fileList5数组里面图片对象也有uid 寻找相同的uid
for (var i = 0; i < this.fileList5.length; i++) {
if(this.fileList5[i].uid == file.uid){
this.fileList5.splice(i,1)
}
}
//提交时候
this.replays.cert_file = this.fileList5
var form = new FormData
for (var i = 0; i < this.replays.cert_file.length; i++) {
form.append('cert_file[]',this.replays.cert_file[i].url)
}
//初始化时 如果是编辑页面
//将编辑带过来的form里面图片信息赋值给fileList5
for (var i = 0; i < this.form.cert_file.length; i++) {
this.fileList5.push({name:'',url:this.form.cert_file[i]})
}