# 完成上传的操作

思路如下：

# 1. 页面上写一个type='file'的input标签 是隐藏的 绑定一个ref属性

<input type="file"
       name="file"
       ref="file"
       @change="handleFileChange"
       style="display:none">
1
2
3
4
5
handleFileChange(e) {
    let file = e.target.files[0]
    this.fileName = file.name
    this.file = file
}
1
2
3
4
5
  1. 页面上有一个按钮，点击按钮让他去触发input标签
<el-button size="small"
           type="primary"
           @click="handleUploadFile">上传文件</el-button>
1
2
3
javaScript:
handleUploadFile(){
    this.$refs.file.click()
}
1
2
3
4

# 3. 由于发送ajax请求，带文件过去文件会变成文档的字符节流

# 4. 所以会用到FormData来完成上传

handleImport() {
    let formData = new FormData()
    formData.append('devices', this.file)
    this.$api.asset.importDevice(formData).then(response => {
        if (response.success) {
          // 判断成功
          this.$message.success('导入成功')
        } else {
          // 判断失败
          this.$message.error(response.message)
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13

TOC