我的vue项目中需要将图片传给后台。
首先:HTML代码:

<input name="file" type="file" @change="updata"/>

传给后台有两种方式:
1.form提交

data() {
      return {
        fileList: [],
        dialogVisible:false,
        base:"",
        files:''
      };
    },
methods: {
      updata(event){
        event.preventDefault()
        let file=event.target.files[0] //根据事件源找到上传的file
        let formData = new FormData();
        formData.append('file',files);//键名要和后台一致
        const instance=axios.create({
          withCredentials: true
         })
        instance.post('/api/upload?certType=产权证',formData).then(res=>{
          console.log(res)
        })
      }
    }

此时控制台的network:
在这里插入图片描述
2.直接将文件转成base64

updata(event){
       event.preventDefault()
       this.files=event.target.files[0]
       this.getBase64(this.files).then(res=>{
         console.log(res)
       })
     },
     getBase64(file) {
       return new Promise(function(resolve, reject) {
         let reader = new FileReader();
         let imgResult = "";
         reader.readAsDataURL(file);
         reader.onload = function() {
           imgResult = reader.result;
         };
         reader.onerror = function(error) {
           reject(error);
         };
         reader.onloadend = function() {
           resolve(imgResult);
         };
       });
     },
Logo

前往低代码交流专区

更多推荐