elementui与input[type="file"]文件上传

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>

data中

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

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
    });
   }
 })
},

在里插入图片描述

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>

data中

data () {
  return {
  	fileName: ''
  }
}

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
  }
}

在这里插入图片描述
就是红框内的名字。如果你想重新赋值,那么就改它的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
    });
   }
 })

每天进步一小步,二手房更近一步。加油!!!

  • 9
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI 的可编辑表格中,可以通过自定义编辑器的方式来实现手动上文件。具体步骤如下: 1. 在表格中定义需要上文件的列,并设置列的 `type` 属性为 `upload`,例如: ``` <el-table-column prop="file" label="文件" :edit-renderer="fileEditor"></el-table-column> ``` 2. 定义 `fileEditor` 编辑器组件,该组件需要包含一个带有 `ref` 属性的 `<el-upload>` 组件,例如: ``` <template> <el-upload ref="upload" class="upload-demo" :auto-upload="false" :on-change="handleChange" :before-upload="handleBeforeUpload" > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button slot="append" size="small" type="success" @click="handleUpload">上文件</el-button> </el-upload> </template> <script> export default { methods: { handleChange(file, fileList) { // 处理文件列表变化事件 console.log(file, fileList); }, handleBeforeUpload(file) { // 处理文件前事件,可进行校验等操作 console.log(file); }, handleUpload() { // 手动触发文件事件 this.$refs.upload.submit(); } } }; </script> ``` 3. 在表格组件中定义 `fileEditor` 编辑器的实例,并在 `editors` 属性中注册,例如: ``` <template> <div> <el-table :data="tableData" :columns="tableColumns" :edit-config="{ trigger: 'click', mode: 'cell' }" :editors="{ fileEditor: fileEditor }" > </el-table> </div> </template> <script> import FileEditor from './FileEditor.vue'; export default { components: { FileEditor }, data() { return { tableData: [ { name: '张三', age: 18, file: null }, { name: '李四', age: 20, file: null } ], tableColumns: [ { prop: 'name', label: '姓名' }, { prop: 'age', label: '年龄' }, { prop: 'file', label: '文件', type: 'upload', editRender: 'fileEditor' } ] }; }, computed: { fileEditor() { return { render: (h, ctx) => { return h('file-editor', { props: { value: ctx.value }, on: { input: ctx.set } }); } }; } } }; </script> ``` 这样,当用户点击表格中 `file` 列的单元格时,会弹出一个上文件的对话框,用户可以选择文件并手动上。上成功后,文件的信息会保存到表格数据中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值