//html
<input ref="img-upload-input" class="img-upload-input" type="file" accept=".png, .jpg" @change="submitUpload">
<el-button style="margin-top: 20px" type="primary" @click="handleSelectedImg">選擇圖片</el-button>

//js
//點(diǎn)擊上傳按鈕
handleSelectedImg() {
?this.$refs['img-upload-input'].click()
},
?//選好圖片之后點(diǎn)擊打開按鈕
submitUpload(e) {
? const files = e.target.files
? const rawFile = files[0] // only use files[0]
? if (!rawFile) return
? this.upload(rawFile)
},
?//上傳
upload(rawFile) {
? ?this.$refs['img-upload-input'].value = null // fix can't select the same excel
? ?if (!this.beforeUpload) {
? ? ?return
? ?}
? ?//檢查文件是否滿足條件
? ?const before = this.beforeUpload(rawFile)
? ?if (before) {
? ?//上傳事件
? ? ?this.uploadSectionFile(this.uploadParams, rawFile)
? ?}
},
beforeUpload(file) {
? ?const isLt1M = file.size / 1024 / 1024 < 50

? ?if (isLt1M) {
? ? ?return true
? ?}
? ?console.log('上傳文件不超過50M', 'warning')
? ?return false
},
uploadSectionFile(params, file) {
? ?let data = params
? ?let fd = new FormData()// FormData 對象
? ?let fileObj = file// 相當(dāng)于input里取得的files
? ?fd.append('stationID', data.stationID)
? ?fd.append('date', data.date)
? ?fd.append('file', fileObj)// 文件對象
? ?supplementFile(fd).then(res => {
? ? ?//調(diào)用上傳接口
? ?})
}

'Content-Type': 'multipart/form-data;'

transformRequest: [function(data) {
? ? // 對 data 進(jìn)行任意轉(zhuǎn)換處理
? ? return data
? }],

let fd = new FormData()
fd.append('file', file)//文件
fd.append('param1', param)