vue上传文件or上传图片文件小结

新到手一个文件上传功能，具体实现是，当截图之后，在文本框中或者type=file的文本框中，粘贴的时候（ctrl+v）实现图片的上传

具体步骤是上传的时候需要验证传参token，那么实现的具体步骤就是，先登录获取token，然后再在请求头传入token两个大步骤实现

我这里是使用vue-cli3实现，很久没用过，配置用了很多时间，大概这个功能，从告知我，到完成上传用了一天的时间，70%的时间花费在了vue请求的axios配置上，我先说axios接口配置

vue.config.js

devServer: {
    // eslint警告和报错
    overlay: {
      warnings: true,
      errors: true
    },
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://xxx.xxx.xxx',
        changeOrigin: true,    // 是否支持跨域
        ws: true,
        // https配置
        secure: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  },

vue.config.js配置里面接口的代理主要是devServer里面，这里的proxy中的target是域名，只写域名，然后/api代理这个域名，pathRewrite这里的就是用'/'来代替'/api'的部分

然后就是在自定义一个http.js 来封装axios的请求

/* eslint-disable */
import axios from 'axios'
import qs from 'qs'
import store from '../store'
import router from '../router'

const baseUrl = '/api'
axios.defaults.baseURL = baseUrl
axios.defaults.timeout = 20000
axios.defaults.withCredentials = false  //是否携带cookie
axios.defaults.headers = {
  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
}
axios.interceptors.request.use(
  config => {
    // 若是有做鉴权token , 就给头部带上token
    // var user = localStorage.getItem('token')
    // if (user !== null) {
    //   console.log(1)
    //   if (user !== '') {
    //     console.log(2)
    //     config.headers.Authorization = user
    //   }
    // }
    // config.headers.common['Authorization'] = user
    store.dispatch('showLoading', '加载中')
    return config
  },
  error => {
    store.dispatch('hideLoading')
    return Promise.reject(error)
  }
)

axios.interceptors.response.use(
  response => {
    let getVisitor = localStorage.getItem('getVisitor')
    if (getVisitor === '游客') {
      if (response.data.code === 400) {
        return Promise.reject({
          message: response.data.msg
        })
      }
    } else if (getVisitor === null) {
      if (response.data.code === 400) {
        router.push({
          name: 'auth'
        })
        return Promise.reject({
          message: response.data.msg
        })
      }
    }
    return response
  },
  error => {
    console.log(error.response)
    if (!error.response) {
      return Promise.reject ({
        message: '请求无响应'
      })
    }
    let message
    switch (error.response.status) {
      case 400:
        message = '错误请求'
        break
      case 401:
        message = '未授权'
        break
      case 403:
        message = '拒绝访问'
        break
      case 404:
        message = '请求路径未找到'
        break
      case 500:
        message = '服务器异常'
        break
      default:
        message = '未知错误'
    }
    return Promise.reject(error)
  }
)

const http = {
  get (url, payload = undefined) {
    return axios({
      method: 'get',
      url: url,
      params: payload,
      paramsSerializer: params => {
        return qs.stringify(params, { indices: false })
      }
    })
  },
  post (url, payload = undefined) {
    return axios({
      method: 'post',
      url: url,
      data: payload,
      transformRequest: [
        data => {
          return qs.stringify(data, { indices: false })
        }
      ]
    })
  },
  put (url, payload = undefined) {
    return axios({
      method: 'post',
      url: url,
      data: payload
    })
  },
  delete (url, payload = undefined) {
    return axios({
      method: 'delete',
      url: url,
      data: payload
    })
  },
  postJson (url, payload = undefined) {
    var user = localStorage.getItem('token')
    return axios({
      method: 'post',
      url: url,
      data: payload,
      headers: {
        // 'Content-Type': 'application/json;charset=UTF-8',
        'Authorization': user
      }
    })
  },
  postFile (url, payload = undefined) {
    var user = localStorage.getItem('token')
    return axios({
      method: 'post',
      url: url,
      data: payload,
      headers: {
        'Content-Type': 'multipart/form-data',
        'Authorization': user
      }
    })
  },
  all (promises) {
    return Promise.all(promises)
  },
  getBase () {
    return baseUrl
  }
}

export default http

这样的封装网上随处可见。

上面代码最上面：

const baseUrl = '/api'
axios.defaults.baseURL = baseUrl

这两句是/api代替域名来请求，

本篇请求是上传文件，所以使用的是上面代码中的postFile方法请求接口，因为post方法请求接口，自定义的时候使用了qs对数据进行了序列化，所以上传的时候不能使用post的接口请求

postFile (url, payload = undefined) {
//获取token
    var user = localStorage.getItem('token')
    return axios({
      method: 'post',
      url: url,
      data: payload,
      headers: {
        'Content-Type': 'multipart/form-data',
        'Authorization': user
      }
    })
  }

这里的Authorization 是和后台约定好的传入的token的入参，然后上传的时候请起头是'Content-Type': 'multipart/form-data',这里这样设置是没有问题的

那么现在就去页面接口请求
复制到剪切板--粘贴（ctrl+v）代码：

var that = this
    var body = document.getElementsByTagName('body')[0]
    body.addEventListener('paste', function (e) {
      var clipboard = e.clipboardData
      var type = clipboard.items[0].type
      if (type.match(/image/)) {
        var blob = clipboard.items[0].getAsFile()
//图片文件赋值到url变量
        that.url = blob
        var file = new FileReader()
        // file.addEventListener('loadend', function (e) {
        //   // that.url = e.target.result
        //   // document.getElementById('result').value = e.target.result
        //   // document.getElementById('img').src = e.target.result
        // })
        file.readAsDataURL(blob)
      } else {
        console.log('失败')
      }
    })

然后先登录获取token：

login () {
      localStorage.removeItem('token')
      this.$http.post('/manager/login/login', {
        username: '18888888888',
        passwd: '123456',
        captchaid: '12',
        code: '111'
      }).then((res) => {
        this.token = res.data.data.token
        localStorage.setItem('token', this.token)
        this.upload()
      })
    },

最后进行图片文件上传

// 上传
    upload () {
    //创建一个formData对象
      let param = new FormData()
    //把图片文件添加到formData中，还有其他的参数一并添加
      param.append('voucher_image', this.url)
      param.append('type', 'recharge')
      param.append('trade_no', 'dda1231231')
    //param.get('voucher_image')只有这样才能看到文件添加到里面了，直接打印param是没有东西的
      console.log(param.get('voucher_image'))
      this.$http.postFile('/manager/upload/upload_voucher_image', param).then((res) => {
        console.log(res)
      })
    },

最后一步就是接口请求上传，然后差不多就成功了

其中要注意，上传文件，请求头，要设置成'Content-Type': 'multipart/form-data'
然后最有意思的一点就是，response headers和request headers这里可以不一样

image.png

network查看的请求的结果差不多是这样的

具体的上传文件流程基本就这样，持续更新~