前後端分離的情況下進行圖片上傳
阿新 • • 發佈：2018-12-30
這個需求本質上和沒有分離的時候沒啥區別，在Vue前端的寫法，可以參考：Vue+SpringBoot實現前後端分離的檔案上傳
我在寫的時候
封裝axios, iview-admin的寫法
import axios from 'axios' class HttpRequest { constructor (baseUrl = baseURL) { this.baseUrl = baseUrl this.queue = {} } getInsideConfig () { const config = { baseURL: this.baseUrl, headers: { } } return config } destroy (url) { delete this.queue[url] if (!Object.keys(this.queue).length) { // Spin.hide() } } interceptors (instance, url) { // 請求攔截 instance.interceptors.request.use(config => { // 新增全域性的loading... if (!Object.keys(this.queue).length) { // Spin.show() // 不建議開啟，因為介面不友好 } this.queue[url] = true return config }, error => { return Promise.reject(error) }) // 響應攔截 instance.interceptors.response.use(res => { this.destroy(url) }, error => { this.destroy(url) return Promise.reject(error) }) } request (options) { const instance = axios.create() options = Object.assign(this.getInsideConfig(), options) this.interceptors(instance, options.url) console.debug(options.url) return instance(options) } } export default HttpRequest
自己的請求
export default {
upload: (file, usage) => {
const data = new FormData()
data.append('file', file)
return axios.request({
url: 'file',
data,
method: 'post'
})
},
}
然後配合iview的upload元件就行了
劃重點
const data = new FormData() data.append('file', file)