起先,在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);
})
}
}