1、:file-list="fileList" :on-change="handleChange" 将文件赋值到fileList
2、 :auto-upload="false" 手动触发上传 写个按钮点击执行这个 this.$refs.upload.submit();
3、自己写上传,不会再触发上传成功或失败回调
4、 request.FILES.getlist('file') 获取上传的多个文件,循环读取写入文件中
<el-uploadclass="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 = fileListconsole.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-uploadclass="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 = fileListconsole.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')