1、:file-list="fileList" :on-change="handleChange" 将文件赋值到fileList
2、 :auto-upload="false" 手动触发上传 写个按钮点击执行这个 this.$refs.upload.submit();
3、自己写上传，不会再触发上传成功或失败回调
4、 request.FILES.getlist('file') 获取上传的多个文件，循环读取写入文件中
<el-upload
class="upload-demo"
ref="upload"
action=""
:on-change="handleChange"
:file-list="fileList"
:auto-upload="false"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jmx/txt文件</div>
</el-upload>
<script>
import axios from 'axios'
export default{
name:"StressTest",
data() {
return {
fileList: []
}
},
components:{
},
methods:{
handleChange(file, fileList) {
console.log(file, fileList);
this.fileList = fileList
console.log('=====',this.fileList)
},
submitUpload() { //上传
let formData = new FormData(); // 用FormData存放上传文件
this.fileList.forEach(file => {
formData.append('file', file.raw)
})
this.fileList = []
console.log('========',formData)
this.$axios.post('/uploadfile/', formData).then((res) => {
//手动上传无法触发成功或失败的钩子函数，因此这里手动调用
console.log('========','success')
this.handleUploadSuccess()
}, (err) => {
this.handleUploadError()
})
},
handleUploadSuccess(){
this.$refs.upload.clearFiles()
alert('上传成功')
},
handleUploadError(){
alert('上传失败')
}
// methods关闭
}
}
</script>
下面试着还是上次触发多次请求呢
<el-upload
class="upload-demo"
ref="upload"
action=""
:on-change="handleChange"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
:file-list="fileList"
:auto-upload="false"
:http-request="uploadFile"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jmx/txt文件</div>
</el-upload>
<script>
import axios from 'axios'
export default{
name:"StressTest",
data() {
return {
fileList: []
}
},
components:{
},
methods:{
submitUpload() {
this.$refs.upload.submit();
},
handleChange(file, fileList) {
console.log(file, fileList);
this.fileList = fileList
console.log('=====',this.fileList)
},
uploadFile(file) { //上传
let formData = new FormData(); // 用FormData存放上传文件
this.fileList.forEach(file => {
formData.append('file', file.raw)
})
console.log('========',formData)
this.$axios.post('/uploadurl/', formData).then((res) => {
//手动上传无法触发成功或失败的钩子函数，因此这里手动调用
console.log('========','success')
file.onSuccess(res)
}, (err) => {
file.onError(err)
})
},
handleUploadSuccess(response, file, fileList){
this.$refs.upload.clearFiles()
alert('上传成功')
},
handleUploadError(err, file, fileList){
alert('上传失败')
}
// methods关闭
}
}
</script>
def add_stressfile(request):
data = {}
for i in request.POST.lists():
data[i[0]] = i[1][0]
myFiles = request.FILES.getlist('file')
print(myFiles)
now = datetime.now()
for myFile in myFiles:
filename = str(now)[:-10].replace(' ', '_').replace(':', '') +'.txt'
print(filename)
file_path = os.path.join(settings.STRESS_ROOT, filename)
fp = open(file_path, 'wb+')
for i in myFile.chunks():
# print(i)
fp.write(i)
fp.close()
return HttpResponse(json.dumps({}), content_type='application/json')