<template>
<el-row>
<el-col :span="20" :offset="4" style="text-align: left">
<span style="margin-left: 200px">上传图片</span>
<el-upload
style="margin-left: 200px"
ref="upload"
:action=saveurl
enctype="multipart/form-data"
class="upload-demo"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-change='handleChange'
:auto-upload="false"
multiple
:limit="number"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">最多上传{{ number }}张图片</div>
</el-upload>
</el-col>
</el-row>
</template>
data() {
return {
device_name: '0',
device_names: [
{
label: '全部',
value: '0',
},
],
textarea2: '',
saveurl: '',
number: 4,
// 图片文件
fileList: [],
}
},
methods: {
handleChange(file, fileList) {
this.fileList = fileList
console.log(file, fileList)
},
handleRemove(file, fileList) {
this.fileList = fileList
console.log(file, fileList)
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 ${this.number} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
console.log(fileList)
return this.$confirm(`确定移除 ${file.name}？`).then(() => {
this.$message({
message: '删除成功',
type: 'success',
})
});
},
save() {
var formdata = new FormData()
formdata.append('id', this.device_name)
formdata.append('remarks', this.textarea2)
for (let i = 0; i < this.fileList.length; i++) {
formdata.append("file", this.fileList[i].raw);
}
this.$axios.post('/equipment/repair/', formdata, {
'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryVCFSAonTuDbVCoAN',
}).then(res => {})
},
}
def create(self,request):
files = request.data.getlist('file')
print(files)