【vue】el-upload 上传文件
发布于 5 个月前 作者 vxhly 4837 次浏览 来自 问答
  <div class="upload">
    <form id="upload" enctype="multipart/form-data" method="post">
      <el-upload
        ref="upload"
        action=""
        :on-change="handleChange"
        :before-upload="beforeAvatarUpload">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="upload">上传到服务器</el-button> -->
        <div slot="tip" class="el-upload__tip">只能上传 JSON 文件</div>
      </el-upload>
    </form>
  </div>
  <script>
  import * as adminsAPI from '@/api/admins'
  export default {
  	  methods: {
    download () {
    handleChange (file) {
      // this.$refs.upload.submit()
      adminsAPI.postUploadFile(Qs.stringify(file))
    },
    beforeAvatarUpload (file) {
      let type = file.name.split('.')
      if (type[1] === 'json') {
        return file
      } else {
        this.$message.error('上传文件只能是 JSON 格式!')
        return false
      }
    },
  }
  </script>

admins.js

/**
 * [postUploadFile 上传文件]
 * @param  {[File]} config [文件流]
 * @return {[type]}        [description]
 */
export async function postUploadFile (config) {
  try {
    // console.log(config)
    const headerConfig = {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
    const response = await fetch.post('/admins/import', { config }, headerConfig)
    if (response.data) {
      Message({ type: 'info', message: '上传配置文件成功' })
    }
    let authToken = response.headers['authorization'].split(' ')
    store.dispatch('refreshToken', authToken[1])
    return response.data
  } catch (err) {
    console.log('message', err)
    if (err.response) {
      throw Error(err.response.data.message)
    }

    throw err
  }
}

上传文件失败,请问哪里出错了

image.png

而且我并不想让它走action,怎么阻止

9 回复

前排水果瓜子

image.png 转换不了 fromData, 绝望中

image.png 只有走action的时候,才会自动转换,但是token问题就很蛋疼了,因为这个项目的所有请求都有验证token是否过期

@parrot-bot 老铁,有木有办法

@vxhly 人家就是路过,哪里会有什么办法。

@Pipe-shen 老铁,我要的是能够转化 formData 的最优做法

最恶心的是转换出来是空的

this.$refs.upload.submit() 这里面怎么加 headers 头

回到顶部