-
2021-07-17 14:40:28
这里是把原生元素
input
作为上传文件,type=file
,然后模拟点击该元素就可以实现上传。<template> <div class="upload-button"> <q-btn outline :color="buttonColor" :loading="uploading" :label="label" class="trigger-btn" @click="onClickButton" /> <input type="file" ref="fileInput" style="display: none" @change="onFilesChanged" /> </div> </template> <script lang="ts"> import Vue from 'vue' export default Vue.extend({ name: 'UploadButton', props: { label: { type: String, default: '上传' }, accept: { type: String, default: '' }, buttonColor: { type: String, default: 'primary' } }, data () { return { uploading: false } }, computed: { }, methods: { onClickButton (_e: Event) { (this.$refs['fileInput'] as any).click() }, onFilesChanged (e: Event) { let fileInput = this.$refs['fileInput'] as any let files = (e.target as any).files this.$emit('filesChanged', { files: files }) if (files && files.length > 0) { fileInput.value = '' } } } }) </script> <style lang="stylus" scoped> .upload-button { .trigger-btn { font-size: 13px; padding: 2px 8px; min-height: 1.58em; } } </style>
更多相关内容 -
Vue触发input选取文件点击事件操作
2020-10-14 23:17:14主要介绍了Vue触发input选取文件点击事件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
Vue实现文件上传和oss上传(带进度条和取消上传功能)和拖拽后点击按钮上传(加loading效果)
2021-11-05 09:43:09Vue实现文件上传(带进度条和取消上传功能) 代码实现 这里我只写了单一文件上传的demo,并且只限制了文件大小不能超过5M。如果想限制上传的文件类型,可自行在input标签中进行设置,如果想要实现多个文件一起上传...Vue实现文件上传和oss上传(带进度条和取消上传功能)
Vue实现文件上传和oss上传
调后端接口的方式(带进度条和取消上传功能)
代码实现
这里我只写了单一文件上传的demo,并且只限制了文件大小不能超过5M。如果想限制上传的文件类型,可自行在input标签中进行设置,如果想要实现多个文件一起上传,先要设置input标签属性multiple=“multiple”,然后利用循环将每一个文件数据存入到formData中,最后作为参数传给服务端进行处理。
因为个人习惯原因,我先对axios进行了封装,创建service.js文件,代码如下:
import axios from "axios"; //引入axios const instance = axios.create({ timeout: 300000, }); // let baseURL = process.env.BASE_URL.toString(); //这里根据自己项目接口的位置自行设定 let baseURL = "http://1xx.1xx.1xx.1xx/hyr"; if (process.env.NODE_ENV == "production") { baseURL = "http://1xx.1xx.1xx.1xx/hyr"; } instance.defaults.baseURL = baseURL; //baseURL用于自动切换本地环境接口和生产环境接口 instance.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded;charset=UTF-8"; instance.defaults.headers.post["Access-Control-Allow-Origin"] = "*"; instance.defaults.withCredentials = false; // 携带cookie //上传附件axios接口封装 const upload = { uploadFile(url, payload, cancelToken, cd) { return instance({ url: url, method: "post", data: payload, onUploadProgress: function(progressEvent) { if (progressEvent.lengthComputable) { cd(progressEvent); } }, cancelToken: cancelToken, }); }, } export { upload, axios, }
进度条的实现: 主要依靠axios中提供的onUploadProgress函数,该函数提供了文件已上传部分的大小progressEvent.loaded和文件总大小progressEvent.total,利用这两个数据我们就可以计算出已经上传文件的进度。
在创建一个vue文件,将上述封装方法引入,代码如下:
<template> <div class="upload-file-box"> <div class="input-line"> <div class="input-title"> <span class="name">附件上传:</span> </div> <label v-if="loading"> <div class="ban-button icon-btn"> <span>附件上传</span> </div> </label> <label for="files" v-else> <div class="upload-btn icon-btn"> <span>附件上传</span> </div> </label> <input type="file" @change="changeFiles" class="files" id="files" /> </div> <div class="limit-info"> 支持文件格式:常用文件格式,单个文件不能超过5Mb </div> <div class="input-line" v-show="loading"> <div class="input-title"> <span class="name">上传状态:</span> </div> <div class="loading-box"> <div class="current-loading" :style="{ width: percent + '%' }"></div> </div> <div class="percent-val">{{ Math.round(percent) }}%</div> <div class="cancel-btn" @click="cancelUpload">取消</div> </div> <div class="file-state" v-show="loading"> <div class="file-name"> <span>{{ originalName }}</span> </div> <div class="state"> <span>正在上传</span> </div> </div> <div class="file-state" v-show="complete"> <div class="file-name"> <a :href="filePath" target="_blank">{{ originalName }}</a> </div> <div class="state" v-show="!!filePath"> <span>已完成</span> </div> </div> </div> </template> <script> import { upload } from "./service.js"; import axios from 'axios' export default { data() { return { source: null, fileName: "", percent: 0, originalName: "", uploadState: false, filePath: "", loading: false, complete: false, } }, methods: { changeFiles(e) { let files = e.srcElement.files; if (files && files.length) { if (files[0].size / 1024 / 1024 > 5) { alert("单个文件不能超过5MB"); document.getElementById("files").value = null; return; } this.originalName = files[0].name; this.source = axios.CancelToken.source(); let formData = new FormData(); formData.append("file", files[0]); this.loading = true; this.complete = false; upload .uploadFile( "api/common/file/upload", formData, this.source.token, (progressEvent) => { let completeVal = (progressEvent.loaded / progressEvent.total) * 100 || 0; this.percent = completeVal; this.uploadState = false; } ) .then((res) => { if (res.data.status) { this.percent = 100; this.uploadState = true; this.filePath = res.data.resultBody.filePath; this.loading = false; this.complete = true; }else{ alert("上传失败"); this.loading = false; this.complete = false; } }).catch((thrown)=>{ if(axios.isCancel(thrown)){ alert("用户取消上传"); this.loading = false; this.complete = false; }else{ alert("其它错误异常"); } }); } document.getElementById("files").value = null; }, cancelUpload() { //取消上传 this.source.cancel("Operation canceled by the user."); }, }, } </script>
<style lang="scss" scoped> .upload-file-box { padding-top: 30px; padding-left: 20px; .input-line { height: 40px; .input-title { float: left; line-height: 40px; font-size: 14px; text-align: right; width: 80px; .text { color: #666; } } .files { display: none; } .input { float: left; width: 400px; margin-left: 16px; } .icon-btn { margin-top: 5px; margin-left: 16px; float: left; height: 30px; line-height: 30px; padding-right: 10px; padding-left: 10px; background-color: #0099ff; border-radius: 5px; color: #fff; font-size: 14px; cursor: pointer; transition: all 0.35s; } .upload-btn { &:hover { opacity: 0.8; } } .ban-button { cursor: not-allowed; background-color: #eeeff3; } .loading-box { margin-top: 15px; float: left; width: 270px; height: 10px; background-color: #f6f6f6; border-radius: 5px; margin-left: 15px; .current-loading { height: 10px; border-radius: 5px; background-color: #3399cc; /*width: 50%;*/ } } .percent-val { line-height: 40px; width: 60px; text-align: center; font-size: 14px; color: #666; float: left; } .cancel-btn { line-height: 40px; font-size: 14px; color: #999; text-decoration: underline; cursor: pointer; user-select: none; &:hover { color: #3399CC; } } .del-btn { line-height: 40px; font-size: 14px; color: #999; text-decoration: underline; cursor: pointer; user-select: none; &:hover { color: #3399CC; } } } .limit-info { color: #999; font-size: 14px; padding-left: 96px; line-height: 34px; height: 34px; } .file-state { width: 270px; margin-left: 95px; overflow: hidden; .file-name { float: left; width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #999; a { color: #999; font-size: 14px; text-decoration: none; &:hover { color: #3399cc; } } } .state { float: right; font-size: 14px; color: #1db396; } } } </style>
结束语
以上代码复制粘贴到自己的vue项目中就能够正常运行,如有错误或需要改进的地方还请与我联系,我将及时进行改正。转载自 简书:FTD止水
下一步考虑 vue文件上传的多文件的进度条如何去实现
调oss上传的方式(带进度条)
封装oss方法
const OSS = require('ali-oss') const OSSConfig = { uploadHost: 'http://xxxxxx.oss-cn-shenzhen.aliyuncs.com', //OSS上传地址 folder: process.env.VUE_APP_OSS_FOLDER, // 上传的文件夹地址 例如 test/file/xxx/、test/img/xxx/ ossParams: { region: 'oss-cn-shenzhen', success_action_status: '200', // 默认200 accessKeyId: 'LxxxxxxJxxxxxxaFoxxxxxxD', accessKeySecret: 'JxxxxxxPxxxxxxhZTxxxxxxFAxxxxxxv', bucket: 'xxxxxx', }, } // 随机数函数 function random_string(len) { len = len || 32 var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' var maxPos = chars.length var pwd = '' for (let i = 0; i < len; i++) { pwd += chars.charAt(Math.floor(Math.random() * maxPos)) } return pwd } // 直接调取oss函数,返回URL结果 function uploadOSS(file) { return new Promise(async (resolve, reject) => { const fileName = `${OSSConfig.folder}${random_string(6)}_${file.name}` let client = new OSS({ region: OSSConfig.ossParams.region, accessKeyId: OSSConfig.ossParams.accessKeyId, accessKeySecret: OSSConfig.ossParams.accessKeySecret, bucket: OSSConfig.ossParams.bucket, secure: true }) const res = await client.multipartUpload(fileName, file) if (res.name) { resolve({ fileName: file.name, url: `${OSSConfig.uploadHost}/${fileName}` }) } else { reject('OSS上传失败') } }) } // 用于上传文件进度条的oss函数 function client() { //后端提供数据 return new OSS({ region: OSSConfig.ossParams.region, accessKeyId: OSSConfig.ossParams.accessKeyId, accessKeySecret: OSSConfig.ossParams.accessKeySecret, bucket: OSSConfig.ossParams.bucket, secure: true }) } export { OSSConfig, random_string, uploadOSS, client }
页面中使用
<template> <div class="content-box"> <div class="container"> <div class="title"> 点击上传图像(支持image/jpg,image/jpeg,image/png,image/gif格式图片且大小不能超过10MB) </div> <el-upload :http-request="Upload" :data="dataObj" :multiple="false" :show-file-list="false" class="image-uploader" drag action="" > <i class="el-icon-upload" /> <div class="el-upload__text"> 将图片拖到此处,或 <em>点击上传</em> </div> </el-upload> <el-progress v-if="isImportLoading" :percentage="progress" color="#61C5C1"></el-progress> <img :src="imgSrc" alt="" style="width:300px;height:300px" v-if="imgSrc"> </div> </div> </template> <script> import { OSSConfig, client , random_string } from '@/utils/ossFile' export default { props: {}, data() { return { // dataObj: {}, // 存签名信息 progress: 0, //进度条 isImportLoading: false, imgSrc: '' } }, created() {}, methods: { // 是为了获取Ali配置信息的,但是封装ossFile 时已写好配置,就不需要了 // beforeUpload() { // return new Promise((resolve, reject) => { // //从后台获取第一步所需的数据 // getAliToken() // .then(response => { // this.dataObj = response.data // resolve(true) // }) // .catch(err => { // console.log(err) // reject(false) // }) // }) // }, Upload(file) { const that = this //判断扩展名 const lastName= file.file.name.lastIndexOf('.') const expandedName = file.file.name.substring(lastName + 1) const typeNames = ['jpg', 'jpeg', 'webp', 'png', 'bmp'] if (typeNames.indexOf(expandedName) < 0) { this.$message.error('不支持的格式!') return } async function multipartUpload() { // 上传的路径地址 + 随机数 + 文件名称 const fileName = process.env.VUE_APP_OSS_FOLDER + random_string(6) + file.file.name //定义唯一的文件名 // client 是第一步中的 client // progress 函数就是进度条回调的函数,提供进度条数据 client().multipartUpload(fileName, file.file, { progress: function (p) { that.isImportLoading= true //获取进度条的值 // console.log(p) that.progress = parseInt(p * 100) } }) .then(result => { //下面是如果对返回结果再进行处理,根据项目需要 that.isImportLoading= false console.log(result) // http://xxxxxx.oss-cn-shenzhen.aliyuncs.com/xxx/xxx/rjdpXG_图片测试1.jpg that.imgSrc = OSSConfig.uploadHost + fileName }) .catch(err => { console.log('err:', err) }) } multipartUpload() } } } </script> <style lang="scss" scoped> </style>
elementUI的拖拽上传,点击导入再调接口上传,单文件且覆盖上次文件(并加loading效果)
样式还没有调整,姑且先看实现效果吧主要代码我抽离处理,不过多解释
<el-upload class="upload-demo-xls" drag ref="speechDemoUpload" action="" :file-list="fileList" :auto-upload="false" :show-file-list="false" accept=".xls,.xlsx,.csv" :on-change="handleChange" > <!-- <i class="el-icon-upload"></i> --> <div class="el-upload__text" v-if="!uploadStatus">将文件拖到此处,或<em>点击上传</em></div> <div class="el-upload__text" v-else> {{ this.file && this.file.name }} <em>点击上传</em> </div> </el-upload> // 这里封装的代码和上面加载进度条的封装函数一样 import { upload, service } from '@/utils/request' this.fileList = [] this.file = null // 上传的文件改变时(覆盖原来的文件) handleChange(file, fileList){ // console.log(file); let extension = file.raw.name.substring(file.raw.name.lastIndexOf(".") + 1); let size = file.size / 1024 / 1024; // let size = file.size / 1024; // console.log(extension, extension.toLowerCase() !== "xlsx"); if (!['xlsx','xls','cvs'].includes(extension.toLowerCase())) { this.$message.warning("文件格式不正确,请上传xls / xlsx / csv格式"); return false; } if (size > 10) { this.$message.warning("文件过大,请进行拆分后分多次上传"); return false } // console.log(file.raw, fileList); if (fileList.length > 0) { this.fileList = [fileList[fileList.length - 1]] // 这一步,是展示最后一次选择的csv文件 this.file = this.fileList[0].raw } // console.log(this.file); this.uploadStatus = true }, async xlsDemoExport(){ if (!this.file) { return this.$message.error('请上传文件') } // await this.$refs.speechDemoUpload.submit() const formData = new FormData() formData.append('file', this.file) // 调用上传接口... this.$loading.show() // `${process.env.VUE_APP_BASE_BRAND_API}/v1/inspectionSpeechArt/importExcel upload.uploadFile('http://10.44.62.108:31009/v1/inspectionSpeechArt/importExcel', formData).then(res => { console.log(res); this.exportStatus = true this.tableData = res.item.failList.map(item => { let obj = {} obj.lineNum = item.lineNum obj.failReason = item .failReason obj.projectCode = item. projectCode return obj }) this.failNum = res.item.failNum this.successNum = res.item.successNum this.$loading.hide() }).catch((error) => { console.log(error); this.$message.error('上传失败,请稍后再试或联系IT解决') this.$loading.hide() }) }, // 样式调整 <style lang="scss" scoped> ::v-deep .el-list-enter-active, ::v-deep .el-list-leave-active { transition: none; } ::v-deep .el-list-enter, ::v-deep .el-list-leave-active { opacity: 0; } ::v-deep .el-upload-list { height: 40px; } </style>
-
vue简单的上传文件
2019-12-21 14:31:58点击按钮上传doc,docx,pdf 类型的文件 直接上代码 <Button @click="choicePDF" :disabled="PDFtrue" icon="ios-download-outline">上传文件</Button> <input ref="filElemPDF" ...需求:
点击按钮上传doc,docx,pdf 类型的文件
直接上代码<Button @click="choicePDF" :disabled="PDFtrue" icon="ios-download-outline">上传文件</Button> <input ref="filElemPDF" type="file" class="upload-file" @change="getFilePDF" style="display:none" id="fileUploadPDF" /> // script // 点击上传按钮 choicePDF() { this.$refs.filElemPDF.dispatchEvent(new MouseEvent("click")); }, // 选中文件后 getFilePDF(e) { console.log(e); let file = e.target.files; console.log(file); var arr = ["pdf", "doc", "docx"]; for (let i = 0; i < file.length; i++) { //取出上传文件的扩展名 let flag = false; var index = file[i].name.lastIndexOf("."); var ext = file[i].name.substr(index + 1); console.log(ext); var name = file[i].name; if (ext == "pdf" || ext == "doc" || ext == "docx") { let formData = new FormData(); formData.append("files", file[i]); // 文件对象 let params = { type: "doc" }; api("/file/manageList", "post", formData, params).then(res => { console.log(res); if (res.data.code == 0) { for (let index = 0; index < res.data.data.length; index++) { let data = eval("(" + res.data.data[index] + ")"); console.log(data); // 用来回显的业务需求 this.getUploadAfterPDF(data.fileId, name); } } else { this.$Message.error(res.data.msg); } }); } else { this.$Message.error("上传文件类型错误"); } } document.getElementById("fileUpload").value = null; },
-
vue文件上传带进度展示
2021-04-02 17:52:12vue 文件上传 带格式、类型、大小、进度展示 -
使用vue构建一个上传图片表单
2020-12-03 10:39:27这篇博客也不知道起个什么名字比较好,毕竟刚开始学习vue,很多还不是很熟悉,一直在慢慢摸索中;之前也习惯了用jQuery写js代码,思维逻辑也要有个转换的过程。 1. 转变思维 使用vue编写代码,首先要做的就是转换... -
vue中使用input[type=”file”]实现文件上传功能
2020-12-29 16:36:03注意:input[type=file] 标签中的属性accept=application/msword,application/pdf 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚... -
vue点击按钮预览图片,pdf,文件
2021-11-19 15:48:29vue点击图片,pdf,文件,预览 <div style="width: 50%; display: inline-block; vertical-align: bottom"> <div class="tit-top">上传图片</div> <div style="min-height: 151px"> <...vue点击按钮预览图片,pdf,文件
<div style="width: 50%; display: inline-block; vertical-align: bottom"> <div class="tit-top">上传图片</div> <div style="min-height: 151px"> <div style="display: inline-block; position: relative" v-for="(item, index) in info.businessImages" :key="index" > //显示pdf <template v-if="checkTestPic(item)"> <img src="@/assets/images/pdf.jpg" alt="" class="imgsty" @click="showImage(item, info.businessImages)" /> </template> //显示图片 <template v-else-if="testPic(item)"> <img :src="qiniuAddr + item + '?imageView2/2/q/100/w/240'" alt="" class="imgsty" @click="showImage(item, info.businessImages)" /> </template> //显示文件 <template v-else ><img src="@/assets/images/word.jpg" alt="" class="imgsty" @click="showImage(item, info.businessImages)" /></template> </div> </div> </div>
点击showImage查看图片 ,pdf,文件
showImage(item, businessImages) { let box = /(\.pptx|\.xls|\.docx|\.doc|\.xlsx|\.ppt)$/i; if (box.test(item)) { window.open(this.qiniuAddr + item, '_blank'); } else { this.url = this.qiniuAddr + item; let arr = []; for (let index = 0; index < businessImages.length; index++) { const element = businessImages[index]; arr.push(this.qiniuAddr + element); } this.srcList = arr; this.$refs.refimg.showViewer = true; } },
判断pdf
checkTestPic(file) { let box = /.pdf$/i; return box.test(file); },
判断图片
testPic(pic) { let box = /(.png|.jpg|.jpeg)$/i; return box.test(pic); },
可通过 previewSrcList 开启预览大图的功能
-
Springboot+vue实现上传文件功能
2020-08-26 21:26:09今天简单实现上传文件功能,上传文件是需要Jar包的。首先我们在pom文件中引入jar包依赖; <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId>... -
vue中使用input[type="file"]实现文件上传功能
2020-10-18 01:36:19主要介绍了vue中使用input[type="file"]实现文件上传功能,实现代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 -
vue实现文件上传功能
2021-01-19 17:22:17vue 文件上传,供大家参考,具体内容如下 首先 先说一下想要实现的效果 就如截图所见,需要将企业和需要上传的文件提交到后台处理,那么接下来就说如何实现 vue 实现 vue 页面代码 ref=upload action=... -
关于javascript:Vue-点击按钮提交表单
2020-12-19 11:55:15我有一个组件,用户可以在其中上传图像,我还想添加一个删除图像的功能。 我添加了一个按钮,该按钮可删除当前图像,但是它的问题在于表单也正在提交,因此我想避免这种情况。 我只需要删除当前图像(如果存在)。 这... -
vue图片上传
2021-01-30 13:49:03当为false时:选择好文件之后还需点击上传按钮调用submitVideoCover之后才能上传,此时需要使用到ref的值作为引哈识按加的移就于果一描近前。量明前动会猿和款述近前。量明前动会猿和款述近前。量明前动会猿和款述近... -
vue 中上传文件下载文件按钮
2020-08-04 16:40:45<script> const tbit = require('../tbit') // const filebtn = require("./filebtn...import pager from "./control/pager.vue" export default { mounted:function (){ var me = this // this.a() this.ad -
实现 vue点击图片上传 预览图片
2021-11-23 01:10:51实现 vue 点击图片上传 预览图片 模板部分 <div> <img :src="img" @click="onclickImg" style="width: 100px;height: 100px;" title="点击上传"> <input type="file" ref="file" @change="preview... -
点击按钮上传图片 详细说明vue
2021-03-31 09:36:25功能 : 替换富文本图片上传功能,由于富文本插件自动转换的的是base64,但base64 太大后台承受不住,所以需要修改点击富文本的图片按钮默认事件。 逐行解析 新手快乐文 点击富文本图标触发的代码如下 子组件内容 ... -
vue实现Excel文件的上传与下载功能的两种方式
2020-12-29 18:53:11导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 icon=el-icon-upload type=primary size=mini click=importFile() >批量导入</el -
vue中文件上传及接收
2021-02-11 15:19:48准备:前端:vue环境+axios+elemen-ui后端:node.js multer前端代码:// 引入axiosimport axios from 'axios';// 获取用户信息getUserInfo() {// 发送请求 获取用户信息getInfo().then(res => {// 接收数据let { data... -
vue.js如何实现图片上传
2021-03-07 07:23:17本章节讲解一下vue.js如何实现图片上传的功能本demo不对上传控件进行美化,如果需要我可以单独写一篇文章写一下如何美化上传按钮本例子在文章最后可下载直接贴代码 var vue = new Vue({el: '#app',data: {imageUrl:... -
vue实现文件上传
2021-12-10 14:03:28vue上传文件 -
vue 定制上传按钮的样式的两种方法
2018-09-04 09:18:45accept=”image/*” 表示这个按钮打开后会默认选择图片上传 css代码 .file-upload { width : 60 px ; height : 26 px ; position : relative ; overflow : hidden ; border : 1 px ... -
Vue Bootstrap 静态服务器 实现文件上传
2021-11-15 20:57:40公司实现文件上传技术选型采用后端SpringBoot/Cloud,前端vue Bootstrap ,阿里云OSS作为文件存储,文件上传功能单独抽取封装文件上传组件,可供所有的文件的操作。 后端框架 版本 SpringBoot 2.5.6 ... -
Vue上传文件之后显示文件内容
2021-09-15 15:57:01<template> <el-form :model="formData" label-width="280px">...el-form-item label="上传kbase视图文件"> <el-upload class="upload-demo" ref="upload" :action="formData.url" :he. -
实现点击按钮预览文件
2016-08-08 13:36:17本地预览文件的功能 -
springboot、vue-simple-uploader文件上传、续传、秒传 源码
2020-02-27 12:55:55demo.zip为springboot idea工程,直接启动DemoApplication fileManage.zip为vue工程,解压后运行安装npm install,启动npm run dev -
【Vue原生input输入框上传文件】
2022-01-19 17:33:41Vue原生input输入框上传文件Vue原生input输入框上传文件 Vue原生input输入框上传文件 <template> <div> <el-button type="primary"> <a href="http://xxx.xlsx">导入模板下载</a&... -
Vue实现多文件上传功能(前端 + 后端代码)
2021-08-14 10:31:00在vue里面要实现多文件上传功能,还是很方便的。 本文就一起来学习一下,如何把多文件上传功能封装成一个组件,后面需要使用的时候,直接两三行代码就能搞定。 1、前端代码 首先我们先看前端,如何把它封装成一个... -
Ant Design Vue 文件上传自定义按钮和文件列表位置
2021-05-18 09:13:02采用默认上传文件样式如下: 主要代码如下,可参照官方示例 <a-upload name="file" style="float: left;" @change="uploadFile" :fileList="fileList" :showUploadList="false" :customRequest=... -
Vue使用formData类型上传文件
2021-09-01 09:43:11这篇文章五分钟教会你上传文件。 1.如图片上传,后端需要前端传formData类型数据的情况下 <el-button type="primary" v-if="imgUrl2 ==''" @click="uploadFile2()">点击上传</el-button> <input ...
收藏数
11,013
精华内容
4,405