vue前端实现上传文件的两种方式

1.使用form表单的形式

第一种方式就是使用FormData的方式进行上传

html代码：

<el-form :model="upform" :rules="uprules" style="width:100%;" ref="upform" label-width="100px"><el-form-item label="上传附件:"><el-button type="primary"@click="upLoad()"size="mini"class="form-btn">点击上传</el-button></el-form-item>
</el-form>

JS代码：

// 请求-上传附件upLoad() {const _this = this;//   const fileType = [//     "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",//     "application/vnd.ms-excel"//   ];const fileType = ['xls','xlsx','et']const inputFile = document.createElement("input")inputFile.type = "file"inputFile.style.display = "none"document.body.appendChild(inputFile)inputFile.click()inputFile.addEventListener("change",function() {const file = inputFile.files[0];var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)if (!fileType.includes(testmsg)) {_this.$message.warning("上传的文件格式只能是,xls,xlsx,et");document.body.removeChild(inputFile);return false;}const formData = new FormData();formData.append("file", file);window.request({url:'xxx/xxx',data:formData,success:(res)=> {if (res.code === 200) {_this.$message.success(res.message || "导入成功");_this.getTableList();}else {_this.$message.success("导入失败");},finally:()=> {document.body.removeChild(inputFile);})})},

2.使用element-ui的el-upload的方式进行上传

这里我是根据需求封装了一个组件

<template><div id="uploadFile"><el-form-item :label="uploadParams.label" :label-width="uploadParams.labelWidth" :id="uploadParams.key"><el-upload :data="paramsData":ref="uploadParams.key"class="upload-demo":before-upload="beforeUploadFile":action="actionUrl":on-preview="handlePreview":on-success="handleSuccess":on-error="handleError":before-remove="beforeRemove":on-remove="handleRemove":disabled="uploadParams.disabled?uploadParams.disabled: false":limit="uploadParams.limit?uploadParams.limit:1":on-exceed="handleExceed":file-list="uploadParams.fileList"><el-button size="small" :disabled="uploadParams.disabled?uploadParams.disabled: false" type="primary">点击上传</el-button><div v-if="uploadParams.showTip?uploadParams.showTip: false" slot="tip" class="el-upload__tip" style="word-break:break-all;"> {{`只能上传${uploadParams.type}文件，且不超过${uploadParams.fileSize}M`}} </div><div v-if="uploadParams.showTip2?uploadParams.showTip2: false" slot="tip" class="el-upload__tip" style="word-break:break-all;color:red"> {{`只能上传${uploadParams.limit}个${uploadParams.type}文件，再次上传需要删除之前的模板`}} </div></el-upload></el-form-item></div>
</template>
<script>
// ===============上传文件组件使用=================
// =========嵌套在el-form中调用组件： <el-from>  <uploadFile :uploadParams="传递参数" @getFileIdReturn="接受上传文件id数组回传"></uploadFile>  </el-form>
// =========  uploadParams中参数说明： label: form的label，labelWidth： form的label-width， key： 指定的组件标识,
// ================================    fileList: 存放文件数组，limit：存放限制上传数量,
// ================================   type: 附件类型(.xxx)，多种以英文逗号分隔， fileSize： 附件大小（M为单位）
// ================================   , showTip: 是否展示提示信息
//
import fileAPI from "@/api/fileApi";
import Config from "@/settings";
export default {name: "uploadFile",props: {uploadParams: Object,paramsData:Object},data() {return {fileIdList: [],//存放附件id数组actionUrl: process.env.VUE_APP_BASE_API + "xxxx/xxxx",//文件上传地址removeUrl: 'xxxx/xxx',// 删除文件地址}},created() {},methods: {// 文件上传成功时的钩子handleSuccess(res, file, fileList) {this.$message.success("文件上传成功");let filename = fileList.map(item => {return item.name;});this.fileIdList.push(res.data.fid);this.$emit("getFileIdReturn", this.fileIdList);//返回文件id数组},// 文件上传失败时的钩子handleError() {this.$message.error("文件上传失败");},handleExceed(files, fileList) {//上传超过限制个数this.$message.warning(`当前限制选择 ${this.uploadParams.limit} 个文件，本次选择了 ${ files.length } 个文件，共选择了 ${files.length + fileList.length} 个文件`);},beforeRemove(file, fileList) {if(file.url==undefined){return;}// 移除前钩子return this.$confirm(`确定移除 ${file.name}？`)},// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传beforeUploadFile(file) {console.log('before upload')// console.log(file)const extension = file.name.substr(file.name.lastIndexOf('.') + 1);console.log('extension', extension)const size = file.size / 1024 / 1024;let temp = this.uploadParams.type.split(",");let typeArr = [];temp.forEach(element => {typeArr.push(element.substr(element.lastIndexOf('.') + 1));});if (!(typeArr.includes(extension)) ) {this.$message.warning(`只能上传后缀是${this.uploadParams.type}的文件`)return false}if (size > this.uploadParams.fileSize) {this.$message.warning(`文件大小不得超过${this.uploadParams.fileSize}M`)return false}return extension && size},handleRemove(file, fileList) {// 移除附件时钩子console.log(file);let id; if(file.url) {id = file.url.split("id=")[1];}else if(file.response) {id = file.response.data.fid;}else {this.uploadParams.fileList = fileList;return}window.request({url: this.removeUrl,data: {ids: id},success: (res) => {if(res.code === 200) {this.$message.success("删除成功！");this.uploadParams.fileList = fileList;this.fileIdList.forEach((element, index) =>{if(element == id) {this.fileIdList.splice(index, 1);}});this.handLoadingShow(false)this.$emit("getFileIdReturn", this.fileIdList);//返回文件id数组}}})},handlePreview(file) {//点击文件列表中已上传的文件时的钩子console.log(file);let fileurl;if(file.url) {fileurl = Config.downUrl + file.url;}else {fileurl = Config.downUrl + process.env.VUE_APP_BASE_API + "xxx/下载地址" + file.response.data.fid;}window.location.href = fileurl;},// 上传控件的回显====回显加载时使用loadFileList (urlAndFid) {//参数url加文件let templateList = null;const downloadUrl = process.env.VUE_APP_BASE_API + xxx/xxx";this.uploadParams.fileList = [];this.fileIdList = [];window.request({url: urlAndFid,success: ({ data }) => {templateList = data;templateList.forEach((element, index) => {const obj = {};obj.name = templateList[index].name;obj.url = downloadUrl + templateList[index].id;obj.id = templateList[index].id;this.uploadParams.fileList.push(obj);this.fileIdList.push(obj.id);});this.$emit("getFileIdReturn", this.fileIdList);//返回文件id数组}});},loadFileList2 (fileUrl, fileParam) {//url: fileUrl,参数fileParamlet templateList = null;const downloadUrl = process.env.VUE_APP_BASE_API + "xxx/xxx";this.uploadParams.fileList = [];this.fileIdList = [];window.request({url: fileUrl,data: fileParam,success: ({ data }) => {templateList = data;templateList.forEach((element, index) => {const obj = {};obj.name = templateList[index].name;obj.url = downloadUrl + templateList[index].id;obj.id = templateList[index].id;this.uploadParams.fileList.push(obj);this.fileIdList.push(obj.id);});this.$emit("getFileIdReturn", this.fileIdList);//返回文件id数组}});},}
}
</script>

vue前端实现上传文件的两种方式相关推荐

django + python上传文件的两种方式
突然心血来潮,研究了下django+python上传文件的两种方式. 第一:直接采用文件读写的方式上传 1. settings.py文件中设置文件的存放路径和文件读取路径 MEDIA_ROOT = o ...
LayUI upload上传组件上传文件的两种方式（手动上传、自动上传）
1 手动上传上传文件分为两步,第一步选择文件,第二步上传文件. HTML代码: <input type='button' id='selectFile' value='选择文件'> &l ...
WebUploader 上传文件的两种方式（手动上传，自动上传）
1 手动上传上传文件分为两步,第一步选择文件,第二步上传文件. HTML代码: <input type='button' id='selectFile' value='选择文件'> &l ...
flask中使用FileField上传文件的两种方式+前端页面上传文件（flask三种上传文件方式）
文章目录上传文件方式一: 1.index.html文件: 2.主文件main.py: 上传文件方式二: 1.index2.html文件: 2.main.py文件: 上传文件方式三: 1.index3 ...
django文件上传到服务器,django上传文件的三种方式
Django文件上传需要考虑的重要事项文件或图片一般通过表单进行.用户在前端点击文件上传,然后以POST方式将数据和文件提交到服务器.服务器在接收到POST请求后需要将其存储在服务器上的某个地方.D ...
vue前端实现上传文件,vue 上传文件
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
用JSP实现上传文件的两种方法
在用Java开发企业器系统的使用,特别是涉及到与办公相关的软件开发的时候,文件的上传是客户经常要提到的要求.因此有一套很好文件上传的解决办法也能方便大家在这一块的开发. 首先申明,该文章是为了自己记 ...
java spring上传_SpringMVC上传文件的三种方式
直接上代码吧,大伙一看便知前台: pageEncoding="utf-8"%> Insert title here 采用流的方式上传文件采用multipart提供的fil ...
【Vue】路由Router传参的两种方式（详解）
本文我们来介绍一下Vue中的路由传参问题,首先我们来准备一个基本路由的页面,如下: <!DOCTYPE html> <html lang="en"> & ...

vue前端实现上传文件的两种方式

1.使用form表单的形式

vue前端实现上传文件的两种方式相关推荐

最新文章

热门文章