elementui与input[type="file"]文件上传_element ui input上传文件,文件名显示在input框中

1.elementui文件上传组件

template中

<el-upload
  :http-request="uploadFile"
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  ref="upload"
  :data="formData"
  limit="4"
  accept="image/jpeg,image/gif,image/png,image/jpg"
  :on-preview="handlePictureCardPreview"
  :on-change="imageChange"
  :auto-upload="false"
  :file-list="imageList"
  :on-remove="handleRemove"
  style="width: 100%;">
    <i class="el-icon-plus"></i>
</el-upload>

// 查看图片的弹出框
<div>
   <el-dialog :visible.sync="dialogVisibleImg">
     <img width="100%" :src="dialogImageUrl" alt="">
   </el-dialog>
 </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

data中

data () {
  return {
  	dialogImageUrl: '',
	dialogVisibleImg: false,
 	// 图片
 	imageList: [],
 	uploadForm: new FormData() // 文件形式
  }
}

1
2
3
4
5
6
7
8
9
10

methods中

uploadFile (file) {
  this.uploadForm.append('files', file.file); // 上传的文件放在files里面了
  console.log(this.uploadForm)
},
handleRemove (file, fileList) {
   _this.imageList.splice(index, 1)
},
handlePictureCardPreview (file) {
  this.dialogImageUrl = file.url;
  this.dialogVisibleImg = true;
},
// 如果是要预览已经上传的图片，那就把路径给放文件的List，比如imageList
// 加入我预览文件列表的第一张，则
this.imageList[0].url = '图片预览路径'

// 文件上传提交时要写请求头，还有其他的数据需要提交的，如下图
addNew: function (form) {
 let _this = this;
 console.log(_this.imageList, '图片文件')
 let params = {}
 _this.$refs['form'].validate((valid) => {
   if (valid) {
     params = JSON.parse(JSON.stringify(_this.formData));
	 // 设置请求头
     let config = {
       headers: {
         'Content-Type': ''
       }
     }
    _this.uploadForm = new FormData()
    _this.$refs.upload.submit(); // 把刚刚保存的文件提交一下
    // model放form表单数据，具体看后台要什么字段就改什么字段，放文件的在第一个方法里
    _this.uploadForm.append('model', JSON.stringify(params));
    _this.axios.post('tmscarfuelms/', _this.uploadForm, config).then(function (response) {
      if (response) {
        if (response.succeed === true) {
        _this.$message.success(response.message)
        } else {
          _this.$message.warning(response.message)
        }
      }
      }).catch(function () {
      _this.loadingBtn = false
    });
   }
 })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

2.input[type=“file”]普通文件上传

template中

<div style="border:1px solid #ccc;border-radius: 4px;">
  // 自己写了个漂亮的按钮，点这个按钮触发下面这个input框，实现选文件
  <el-button icon="el-icon-document-copy" type="primary" size="small" style="margin-left: 15px;" @click="checkFile">选择文件</el-button>
  <span>{{fileName}}</span> // 放文件名的
  <input type="file" id="fileinput" style="display: none;" @change="checkFileSure"/> // 实际上传文件的input框在这
</div>
1
2
3
4
5
6

data中

data () {
  return {
  	fileName: ''
  }
}
1
2
3
4
5

methods中

methods: {
  // 漂亮按钮点击事件
  checkFile () {
    document.querySelector('#fileinput').click()
  },
  // 选择的文件
  // !!!!!!!!!!!!!!!!!!!!注意。如果使用的input框。文件选择后的名字不是value值
  // 而是name值 document.querySelector('#fileinput').files[0].name
  checkFileSure (val) {
    console.log(document.querySelector('#fileinput').files[0])
    this.fileName = document.querySelector('#fileinput').files[0].name
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

就是红框内的名字。如果你想重新赋值，那么就改它的name值
document.querySelector(’#fileinput’).files[0].name = ‘大美女.jpg’
！！！！！！！！！！！！注意！！！！！！！！！！！
普通文件上传有个隐藏的小问题，就是先选择一个文件比如：大美女.jpg
我再重新选这个文件就选不上。获者仿elementui文件上传做个删除选择图片的按钮后。点击删除，把文件删除后也选不了同样的文件。（再次选大美女.jpg）选不了。只能先随便选一个文件再选大美女.jpg才有反应。因为input[type=“file”]是change事件，文件选择没有发生改变所以无效。
解决方法：document.querySelector(’#fileinput’).value = ‘’ 即可
文件上传提交时，也有form表单或者其他也要提交的内容时：
methods中

addNew: function (form) {
 let _this = this;
 let params = {}
 _this.$refs['form'].validate((valid) => {
   if (valid) {
     params = JSON.parse(JSON.stringify(_this.formData));
	 // 设置请求头
     let config = {
       headers: {
         'Content-Type': 'multipart/form-data'
         // 'authorization': getCookie('accessToken')
       }
     }
    _this.uploadForm = new FormData()
    // model放form表单数据，具体看后台要什么字段就改什么字段，放文件的在第一个方法里
    _this.uploadForm.append('model', JSON.stringify(params)); // model放文件以外的内容
    _this.uploadForm.append('files', JSON.stringify(params)); // files放文件，同理，model和files都与后台协商好。后台说文件我要filesx那就把files改成filesx即可
    _this.axios.post('tmscarfuelms/', _this.uploadForm, config).then(function (response) {
      if (response) {
        if (response.succeed === true) {
        _this.$message.success(response.message)
        } else {
          _this.$message.warning(response.message)
        }
      }
      }).catch(function () {
      _this.loadingBtn = false
    });
   }
 })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

每天进步一小步，二手房更近一步。加油！！！