uni-app 上传图片的坑

起先，在uni-app插件市场下载了上传图片的插件
由于uni-app的API uni.unloadFile()

其中content-type 为 multipart/form-data

导致在于后端对接口时出现跨域

最后解决方法:自己重新用axios封装了一个请求方式

npm install axios

util / axios-request.js

import axios from 'axios'

let URL = 'xxxxx'
const service = axios.create({
    baseURL: URL,
    timeout: 5000,
    // headers: { 'Content-type': 'application/json' }
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
})

// 提交
service.interceptors.request.use(
    config => {
        return config
    },
    error => {
        console.log(error)
        return Promise.reject(error)
    }
)

// 请求
service.interceptors.response.use(
    response => {
        const res = response.data
            // console.log(res)
            // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数
        if (response.status === 200) {
            
            return Promise.resolve(res)
        } else {
            return Promise.reject(res)
        }
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)
export default service

api / upload.js

import request from '@/util/axios-request.js'

export function UploadRent(params) {
    return request({
        url: '/UploadRent',
        method: 'POST',
        data:params
    })
}

page / upload.vue

import {UploadRent} from "@/api/upload.js"
   methods:{
      upload(){
          let formData = new FormData();
         formData.append('file',i);
          formData.append('ID',this.ID);
          UploadRent(formData).then(res=>{
            console.log(res);
    })
    }
}