新建頁面 和編輯頁面 為同一個html

html里面多張圖片上傳 刪除?

（主要是通過uid 來對圖片數(shù)組fileList5進(jìn)行更新 刪除）

（fileList5里面圖片對象的url 都換成oss返回的圖片url 替換掉之前的blob 統(tǒng)一起來更好處理 submit的時候可以直接取fileList5的數(shù)據(jù)）

（扔掉elemen-ui上傳圖片自帶的fileList5里面的url 換成可以對接接口的url）

需求

html：

<el-form-item label="認(rèn)證文件" 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：

//圖片改變時 將圖片數(shù)據(jù)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時已經(jīng)將圖片信息傳入到fileList5中了 有當(dāng)前圖片的uid和url 但是url是blob形式的

//因為是多張圖片 所以fileList5數(shù)組有多個值 循環(huán)通過uid 替換掉當(dāng)前圖片的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 找到對應(yīng)的圖片對象 刪除數(shù)組中的這個圖片對象

//參數(shù)file里面有uid，fileList5數(shù)組里面圖片對象也有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]})

}