element-ui 表单新建 编辑 多张图片上传与删除

新建页面 和编辑页面 为同一个html

html里面多张图片上传 删除 

(主要是通过uid 来对图片数组fileList5进行更新 删除)

(fileList5里面图片对象的url 都换成oss返回的图片url 替换掉之前的blob 统一起来更好处理 submit的时候可以直接取fileList5的数据)

(扔掉elemen-ui上传图片自带的fileList5里面的url 换成可以对接接口的url)


需求

html:

   

  点击上传

 

每张图片大小不超过1M

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

multiple 表示多选

:limit='3' 限制传3张



js:

//图片改变时 将图片数据push到fileList5中

handleChange5(file, fileList) {

    this.fileList5.push(file)

},

此时fileList5


blob形式



图片上传成功 

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

    }

}

})

})

},


oss返回的url



//删除图片 点击叉叉删除

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]})

}

你可能感兴趣的:(element-ui 表单新建 编辑 多张图片上传与删除)