機智使用elementUI呼叫一次介面同時上傳圖片和檔案，同時需要攜帶其他引數，實現呼叫後端介面

摘要： 今天有一個坑，同時要上傳圖片和檔案，而且圖片要展示縮圖，檔案要展示列表。 我的思路是： 首先，只上傳附件照片，這個直接看ele的官方例子就行，不僅僅上傳附件照片，還同時上傳其他引數。 然後，再做上傳照片和檔案，上傳其他引數，其實也就是檔案合併。 一、上傳照片和其他引數 頁面...

今天有一個坑，同時要上傳圖片和檔案，而且圖片要展示縮圖，檔案要展示列表。

我的思路是：

首先，只上傳附件照片，這個直接看ele的官方例子就行，不僅僅上傳附件照片，還同時上傳其他引數。

然後，再做上傳照片和檔案，上傳其他引數，其實也就是檔案合併。

一、上傳照片和其他引數

頁面樣式大約就是這樣的，引數有優先順序，發生時間，服務單名稱，服務單描述，圖片附件上傳。

（一）檢視部分程式碼：

<el-form-item prop="image" label="圖片附件上傳">
<el-upload
ref="upload"
:action="uploadAction"
:beforeUpload="beforeUploadPicture"
:on-change="imageChange"
list-type="picture-card"
name="files"
:data="paramsData"
:limit="3"
multiple
:auto-upload="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemovePicture">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>

 <el-button size="mini" type="primary" @click="confirm()">確 定</el-button>複製程式碼

說明：

1、action變數為後端圖片介面的地址

2、beforeUpload方法是指的上傳之前觸發的函式，可以用來做前端檔案格式判斷，檔案大小判斷

3、on-change方法是指每次選擇檔案都會觸發函式，可以用來前端刪除和新增照片

4、list-type屬性指的是照片picture-card展示的方式

5、name指的是上傳的檔案欄位名，這是後端確認檔案流的欄位名，可以隨便寫

6、data屬性指的是上傳時附帶的額外引數，這是指的其他引數

7、limit屬性指的是上傳檔案的個數極限。

8、multiple屬性指的是可以每次多選檔案，true為多選，false為單選

9、auto-upload屬性指的是自動上傳的，true為可以自動上傳，false為不可以自動上傳

10、on-preview方法指的是檢視縮圖的方法

11、on-remove方法指的是刪除檔案的方法

12、ref繫結dom元素

（二）data部分程式碼

data () {
return {
selectedCategorySpe: this.selectedCategory,
serviceForm: {
title: '',
desc: '',
priority: '',
occurDate: ''
},
dialogImageUrl: '',
dialogVisible: false,
uploadAction: "/inner/event/order/submit/submit" + "&accessToken=" + this.$store.getters.token
}
},複製程式碼

（三）computed部分程式碼

computed: {
...mapGetters([
'constConfig'
]),
paramsData: function () {
let params = {
eventCategory: this.selectedCategorySpe.categoryId,
priority: this.serviceForm.priority,
title: this.serviceForm.title,
dsc: this.serviceForm.desc,
occurDate: this.serviceForm.occurDate
}
return params
}
},複製程式碼

使用computed實現實時監測paramsData的值，只要selectedCategorySpe.categoryId，serviceForm.priority，serviceForm.title

，serviceForm.desc，serviceForm.occurDate中只有一個變化，都會重新計算paramsData的值。

（四）methods部分方法

beforeUploadPicture(file){
const isImage = file.type == 'image/png' || file.type == 'image/jpg' ||file.type == 'image/jpeg' || file.type == 'image/bmp' || file.type == 'image/gif' || file.type == 'image/webp';
const isLt2M = file.size <1024 * 1024 * 2;
if (!isImage) {
this.$message.error('上傳只能是png,jpg,jpeg,bmp,gif,webp格式!');
}
if (!isLt2M) {
this.$message.error('上傳圖片大小不能超過 2MB!');
}
return isImage && isLt2M;
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleRemovePicture(file, fileList) {
console.log(file, fileList);
},
imageChange(file, fileList, name) {
console.log(file, fileList);
},

 confirm(){
this.$refs.upload.submit();
}複製程式碼

說明:confirm使用ref的繫結的upload，緊接著呼叫form的表單的submit方法。這個vue已經封裝好了，這時候傳的引數可以看到post傳遞的檔案物件。

二、同時上傳圖片和檔案，並且圖片可以看縮圖檔案顯示成列表

但是當你出現這樣的需求的時候，一臉矇蔽

（一）檢視部分程式碼

<el-form-item prop="image" label="圖片附件上傳">
<el-upload
ref="uploadImage"
:action="uploadAction"
:beforeUpload="beforeUploadPicture"
:on-change="imageChange"
list-type="picture-card"
name="files"
:limit="3"
multiple
:auto-upload="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemovePicture">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
<el-form-item prop="image" label="檔案附件上傳">
<el-upload
ref="uploadFile"
class="upload-demo"
name="files"
:on-change="fileChange"
:action="uploadAction"
:on-preview="handlePreviewFile"
:on-remove="handleRemoveFile"
:before-remove="beforeRemoveFile"
multiple
:auto-upload="false"
:limit="3"
:on-exceed="handleExceedFile"
:file-list="fileList">
<el-button size="small" type="primary">點選上傳</el-button>
<!--<div slot="tip" class="el-upload__tip">只能上傳檔案，且不超過2M</div>-->
</el-upload>
</el-form-item>

 <el-button size="mini" type="primary" @click="confirm()">確 定</el-button>複製程式碼

（2）data部分資料

data () {
return { 
selectedCategorySpe: this.selectedCategory,
serviceForm: {
title: '',
desc: '',
priority: '',
occurDate: '',
},
images: {},
files: {},
dialogImageUrl: '',
dialogVisible: false
}
},複製程式碼

（3）method部分資料

beforeUploadPicture(file){
const isImage = file.type == 'image/png' || file.type == 'image/jpg' ||file.type == 'image/jpeg' || file.type == 'image/bmp' || file.type == 'image/gif' || file.type == 'image/webp';
const isLt2M = file.size <1024 * 1024 * 2;
if (!isImage) {
this.$message.error('上傳只能是png,jpg,jpeg,bmp,gif,webp格式!');
}
if (!isLt2M) {
this.$message.error('上傳圖片大小不能超過 2MB!');
}
return isImage && isLt2M;
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleRemovePicture(file, fileList) {
console.log(file, fileList);
},
imageChange(file, fileList, name) {
console.log(file, fileList);
this.imageList = fileList;

this.images[''] = fileList;
},

handleRemoveFile(file, fileList) {
console.log(file, fileList);
},
handlePreviewFile(file) {
console.log(file);
},
handleExceedFile(files, fileList) {
this.$message.warning(`當前限制選擇 3 個檔案，本次選擇了 ${files.length} 個檔案，共選擇了 ${files.length + fileList.length} 個檔案`);
},
beforeRemoveFile(file, fileList) {
return this.$confirm(`確定移除 ${ file.name }？`);
},
fileChange(file,fileList) {
console.log(file, fileList);
this.fileList = fileList;

this.files[''] = fileList;
},

confirm(){
let wfForm = new FormData();
wfForm.append( 'eventCategory',this.selectedCategorySpe.categoryId)
wfForm.append( 'priority',this.serviceForm.priority)
wfForm.append( 'title',this.serviceForm.title)
wfForm.append( 'dsc',this.serviceForm.desc)
wfForm.append( 'occurDate',this.serviceForm.occurDate)
Object.entries(this.images).forEach(file => {
file[1].forEach(item => {
wfForm.append('files', item.raw)
wfForm.append(item.name, file[0])
})
})
Object.entries(this.files).forEach(file => {
file[1].forEach(item => {
wfForm.append('files', item.raw)
wfForm.append(item.name, file[0])
})
})
createEventOrder(wfForm).then( res => {
console.log(res, 'res')
if(res.retValue === 1){
this.$message.success( '成功建立服務單' );
this.handleClose()
}else{

}
})

}複製程式碼

說明一下，新建了this.files存檔案列表，this.images存圖片列表。在confirm中新建一個FormData物件，使用append方法將引數變數加到資料物件中，和檔案物件。最後將FormData物件傳給後端。

傳遞的引數截圖如下：