使用el-upload实现文件的自动上传,并根据业务需要进行改造。

根据业务需要,先将业务B所需文件上传至服务器,并将文件记录保存到业务数据库中;业务A要根据条件找到业务B中的文件,并展示,且可将该记录删除、将该文件上传至服务器。基于该情况,要将自动上传的el-upload进行改造。在改造过程中遇到了一些问题,也对el-upload有了更进一步的了解。
在这里插入图片描述

<div id="c2-free-tag" class="upload-title"><span id="c2-free-tag33" class="c2-free-tag3">
文件上传
 span><span id="c2-free-tag35" class="c2-free-tag4">
(支持文件格式:.doc .docx .pdf .xls .xlsx .wps .ppt .pptx .jpg .jpeg .png .bmp .gif .tiff .svg)
 span>
<el-upload
:ref="fileRef"
class="el-uploads"
:on-preview="handlePreview"
:file-list="fileArr"
:multiple="multiple"
:action="uploadAction()" 
:show-file-list="showFileList"
:on-progress="uploadFileProcess" 
:on-success="handleFileSuccess" 
:data="data"
:auto-upload="autoUpload"
:ref="fileRef"
:on-exceed="onExceed"
:limit="limit"
:on-change="handleUploadChange"
:name="name"
:on-exceed="onExceed">
  <el-button slot="trigger" size="small" type="primary">浏览el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submit_btn_click">点击上传el-button>
el-upload>
div>
props: {
   
    /*引用*/
	fileRef: {
   
		type: String,
		default: "fileRef"
	},
	/*文件列表*/
	fileArr: {
   
		type: Array,
		default: []
	},
	/*上传时附带的额外参数*/
	data: {
   
		type: Object,
		default () {
   
	

你可能感兴趣的:(vue,windows,前端,vue.js)