vue上传图片formdata

Axios 中的文件上传（Upload File）方法

const axios = require('axios');

const fileInput = document.querySelector('#fileInput');
const file = fileInput.files[0];

const formData = new FormData();
formData.append('file', file);

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log('上传成功', response.data);
}).catch(error => {
  console.error('上传失败', error);
});

diy

import http from '@/utils/http';
import lrz from 'lrz';

export const upImage = async file => {
  const { formData } = await lrz(file);
  return http.post('/common/uploadali', formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  });
};
//vant
 async upload(file) {
      file.status = 'uploading';
      try {
        const { data } = await upImage(file.file);
        file.status = 'done';
        file.remoteUrl = data.url;
      } catch (error) {
        file.status = 'failed';
      }
    },

小程序

/**
 * 上传图片
 * @param {String} tempFilePath 图片路径
 */
export const uploadImage = tempFilePath => {
  return wxp.uploadFile({
    url: baseURL + '/weapp' + '/common/uploadali',
    filePath: tempFilePath,
    name: 'file',
    formData: {
      file: tempFilePath,
    },
    header: {
      'Content-Type': 'multipart/form-data',
      token: wx.getStorageSync('token'),
      ...headers,
    },
  })
}

const { data } = await uploadImage(wxFile[0].path)

vue_原生axios

    var formdata = new FormData()
    //formdata本身是个对象，参数名为file
    formdata.append('file', file.file)
    Axios({
     method: 'post',
     url: 'http://192.168.0.35/api/common/upload',
     headers: {
      'Content-Type': 'multipart/form-data',
      token: localStorage.getItem("token") || "121324"
     },
     data:formdata,  //formdata本身是个对象，参数名为file
    }).then(data => {
     console.log(2222222222222,data)
    });