【Upload】Vue和 Element-ui-vue的方法

【Upload】Vue和 Element-ui-vue的方法

前置js代码

• 封装request

import axios from 'axios'
import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 60000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    const token = getToken()
    if (token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
export default service

• 定义接口

import request from '@/utils/request'

export function uploadFile(data) {
  return request({
    url: '/upload',
    method: 'post',
    data,
    timeout: 200000,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

Vue

<el-button
        icon="el-icon-upload"
        size="large"
        type="primary"
        style="color:rgb(255, 255, 255);margin-left: 200px;margin-top:70px;"
        @click="handleUploadFile"
      >
        上传文件
        <input v-show="false" ref="uploadInput" type="file">
      </el-button>

handleUploadFile() {
      this.Loading = false
      this.$refs.uploadInput.click()
      this.$refs.uploadInput.onchange = e => {
        const formData = new FormData()
        formData.append('resume_file', e.target.files[0])
        const readingID = JSON.parse(localStorage.getItem('userData'))
        formData.append('user_id', readingID.user_id)
        this.$message({
          message: '正在解析中，请稍等',
          type: 'success',
          duration: 4000
        })
        this.listloading = true
        uploadFile(formData).then(res => {
          console.log(res)
          if (res.data.code !== 1000) {
            this.$message({
              message: '解析失败，请重试~ 请勿重复上传',
              type: 'error',
              duration: 1000
            })
            this.listloading = false
          } else {
            this.$message({
              message: '解析成功',
              type: 'success',
              duration: 1000
            })
            localStorage.setItem('AnalyzeData', JSON.stringify(res.data))
            const resData = JSON.parse(localStorage.getItem('AnalyzeData'))
            this.mockres = resData.data
            this.listloading = false
          }
        })
      }
    },

Element-ui-vue

 <div class="chart-wrapper" style="margin-bottom: 15px;">
          <div class="font-16">firefox日志上传</div>
          <el-upload
            class="upload-demo"
            style="text-align: center"
            drag
            action="./upload"
            :http-request="up"
            :on-change="success"
            multiple
            show-file-list="true"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div slot="tip" class="el-upload__tip" style="text-align: center;margin-bottom: 15px;">只能上传txt文件，且不超过500kb</div>
          </el-upload>
        </div>

• 数据

const formData = new FormData()
import { uploadFile } from '@/api/resume'
export default {
  name: 'xxx',
  data() {
    return {
      form: null
    }
  }
}

  methods: {
    success(file, fileList) {
      formData.append('file', file.raw)
      this.form = formData
    },
    up() {
      uploadFile(this.form).then(res => {
        console.log(res)
        if (res.status !== 200) {
          this.$message({
            message: '上传失败',
            type: 'error',
            duration: 2000
          })
        } else {
          this.$message({
            message: '上传成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    }
  }

1. 注意钩子返回的值file里的raw才是真正的formdata的键值对中的值，而不是直接file
2. on-change钩子不管成功失败都可以返回
3. action是默认的url，就是文件上传的服务器路径，但是无法自定义，使用http-request自定义上传,覆盖action操作
4. localStorage.setItem('formData', JSON.stringify(formData)) 存入localstorage后读取const formData = JSON.parse(localStorage.getItem('formData')) 但打印出来的数据格式变了 不再是formdata，是因为JSON.stringify()和JSON.parse()用于处理普通的JavaScript对象和数组，但不适用于特殊的对象类型，如FormData。当尝试将FormData对象转换为JSON字符串并再转回来时，它不再是FormData对象，而是一个普通的JavaScript对象。

参考资料

1. 上传组件