当前位置: 首页 > article >正文

el-upload上传多个文件,一次请求,Django接收

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')


http://www.kler.cn/a/421690.html

相关文章:

  • 【Elasticsearch】实现分布式系统日志高效追踪
  • 微服务的负载均衡可以通过哪些组件实现
  • sshd[1905]: refused connect from 192.168.1.* (192.168.1.*),ssh 拒绝连接的问题解决
  • 在鲲鹏麒麟服务器上部署MySQL主从集群
  • SQLite:DDL(数据定义语言)的基本用法
  • 泛化调用 :在没有接口的情况下进行RPC调用
  • jupyter-lab 环境构建
  • 探索非传统排序算法:从睡眠排序到量子博戈排序的趣味实现
  • MySql:理解数据库
  • web三、 window对象,延时器,定时器,时间戳,location对象(地址),本地存储-localStorage,数组去重new Set
  • 12.2深度学习_项目实战
  • 【k8s】创建基于sa的token的kubeconfig
  • 【HarmonyOS】鸿蒙应用地理位置获取,地理名称获取
  • Delphi 12.2.1 idhttpserver的使用方法
  • RK3568 + OpenCV 会碰撞出什么火花?案例详解:2-1 基于OpenCV的画线实验
  • Java 基于Spring AI RAG组件做AI智能问答_rag检索增强_AI智能问答
  • 03-13、SpringCloud Alibaba第十三章,升级篇,服务降级、熔断和限流Sentinel
  • Git相关记录
  • 前端跳转路由的时候,清掉缓存
  • Spark常问面试题---项目总结
  • Java基础——(二)Java基本程序结构设计
  • qt QAnimationDriver详解
  • 一种多功能调试工具设计方案开源
  • 跟着官方文档快速入门RAGAS
  • Linux内核4.14版本——ccf时钟子系统(3)——ccf一些核心结构体
  • 使用Tauri创建桌面应用