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

Posted 2023-02-28

参考技术A 新建页面 和编辑页面 为同一个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 elsefile = 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])