zoukankan      html  css  js  c++  java
  • 前端(vue)文件上传

    template部分

    <el-upload
              class="upload-demo"
              ref="upload"
              :limit="1"
              name="articleImage"
              :file-list="fileList"
              :on-success="onSuccessData"
              action="http://192.168.1.113:9305/upload/image/uploadImg"
              :before-upload="beforeUpload">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <a href="./static/moban.xlsx" rel="external nofollow" download="模板"><el-button size="small" type="success">下载模板</el-button</a>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传excel文件,且不超过5MB</div>
              <div slot="tip" class="el-upload-list__item-name">{{fileName}}</div>
    </el-upload> 
    

    如何没有特殊要求,可以直接配置组件上传文件,返回保存路径

    js部分

    // 文件上传成功时触发的钩子函数
    onSuccessData(response, file, fileList) {
          console.log(response)
          console.log(file)
          console.log(fileList)
    },
    // 文件上传时的验证,自定义验证规则,
    beforeUpload(file){
          // debugger(打断点)
          console.log(file,'文件');
          this.files = file;
          const extension = file.name.split('.')[1] === 'xls'
          const extension2 = file.name.split('.')[1] === 'xlsx'
          const isLt2M = file.size / 1024 / 1024 < 5
          if (!extension && !extension2) {
            this.$message.warning('上传模板只能是 xls、xlsx格式!')
            return
          }
          if (!isLt2M) {
            this.$message.warning('上传模板大小不能超过 5MB!')
            return
          }
          this.fileName = file.name;
          // return false // 返回false不会自动上传
    },
    // 手动上传文件到服务器
    submitUpload() {
          console.log('上传'+this.files.name)
          if(this.fileName == ""){
            this.$message.warning('请选择要上传的文件!')
            return false
          }
          let fileFormData  = new FormData();
          fileFormData.append('articleImage', this.files, this.fileName);//filename是键,file是值,就是要传的文件,test.zip是要传的文件名
          let requestConfig = {
            headers: {
            'Content-Type': 'multipart/form-data'
            },
          }
          this.$axios.post(`/upload/image/uploadImg`, fileFormData, requestConfig)
          .then((res) => {
            console.log('上传数据后返或数据')
            console.log(res)
             if (data && data.code === 0) {
               this.$message({
                 message: '操作成功',
                 type: 'success',
                 duration: 1500,
                 onClose: () => {
                 this.visible = false
                 this.$emit('refreshDataList')
                 }
                })
            } else {
            this.$message.error(data.msg)
            }
          }) 
    },
    
  • 相关阅读:
    1442. Count Triplets That Can Form Two Arrays of Equal XOR
    1441. Build an Array With Stack Operations
    312. Burst Balloons
    367. Valid Perfect Square
    307. Range Sum Query
    1232. Check If It Is a Straight Line
    993. Cousins in Binary Tree
    1436. Destination City
    476. Number Complement
    383. Ransom Note
  • 原文地址:https://www.cnblogs.com/j-j-h/p/12697604.html
Copyright © 2011-2022 走看看