upload单独上传和统一上传

统一上传

<el-form-item label="照片" prop="photo"><el-uploadclass="avatar-uploader"action="#" //不写上传地址:auto-upload="false"//选取文件后不立即上传:multiple="false"//是否支持多文件:on-change="uploadFile"//文件状态改变时触发drag//拖拽accept="image/png,image/gif,image/jpg,image/jpeg"//上传文件的类型><img v-if="imageUrl" :src="data:imageUrl" class="avatar" /><div v-else><i class="el-icon-plus avatar-uploader-icon"></i><p style="font-size: 14px; color: #fff">上传照片</p></div></el-upload></el-form-item>``````java
data(){return{imageUrl: "",}
}

    uploadFile(item) {this.form.photo = item.raw; // 图片文件this.imageUrl = URL.createObjectURL(item.raw); // 图片上传浏览器回显地址},

单独上传

 <el-form-item label="文件" prop="processFile"><el-uploadclass="upload-demo"drag //拖拽action="uploadAction" //上传地址:before-upload="beforeUpload"//这个方法可不写:on-success="uploadSuccess":on-error="uploadError":on-change="handleUploadChange":on-exceed="uploadExceed"//这个方法可不写:file-list="fileList":multiple="false"//是否支持多文件accept=".word,.pdf"//上传的文件格式><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传word/pdf文件,且不超过500kb</div></el-upload></el-form-item>

ipConfig.js

export const baseIP = "http://192.168.xx.xxxx:10001";
export const baseUrl = {base: baseIP + "/api",
};

import { baseUrl } from "../../../public/ipConfig";
export default{data(){return{fileList: [], //上传回显需要uploadAction: baseUrl.base + "/preplan/info/upload",}}}

 // 文件上传前对文件类型，文件大小判断限制beforeUpload(file) {const { name, size } = file;const index = name.lastIndexOf(".");// 判断文件名是否有后缀，没后缀文件错误if (index == -1) {this.$notify.error({title: "文件类型错误！",message: "请上传word/pdf格式的文件！",});return false;}const fileType = name.substr(index + 1);const acceptFileType = ["word", "pdf"];// 判断文件类型if (!acceptFileType.includes(fileType)) {this.$notify.error({title: "错误",message: "文件类型错误，请重新上传！",});return false;}//判断文件大小if (size > 10 * 1024 * 1024) {this.$notify.error({title: "错误",message: "文件大小不能超过10M,请重新上传！",});return false;}return true;},// 上传接口成功uploadSuccess(res) {if (res.code == 200) {this.file = res.data.relativePath;console.log(this.file, "this.file");// 文件上传成功this.$notify.success({title: "成功",message: "文件上传成功！",});} else {this.uploadError();}},// 文件上传失败uploadError() {this.$notify.error({title: "错误",message: "文件上传失败！",});},// 文件个数超过限制uploadExceed() {this.$notify.warning({title: "提示",message: "您已添加了一个文件，如需替换，请先删除已添加的文件！",});},handleUploadChange(file, fileList) {// console.log(file, fileList, '===handleUploadChange===');if (fileList.length > 1) {fileList.splice(0, 1);}this.fileList = fileList;},

    // 新建addList() {this.fileList = [];},// 编辑editList(row) {this.fileList = [{name: row.fileName,},];},// 查看checkList(row) {this.fileList = [{name: row.fileName,},];},

upload单独上传和统一上传相关推荐

定制jQuery File Upload为微博式单文件上传
原文链接:http://avnpc.com/pages/single-file-upload-component-by-jquery-file-upload jQuery File Upload是一个 ...
tomcat temp 大量 upload 文件_渗透测试之文件上传漏洞总结
文末下载上传环境源码客户端 js检查一般都是在网页上写一段javascript脚本,校验上传文件的后缀名,有白名单形式也有黑名单形式. 查看源代码可以看到有如下代码对上传文件类型进行了限制: 我们 ...
layui上传文件php上传接口异常,layui.upload上传图片报错“请求上传接口出现异常”...
layui.upload上传图片报错"请求上传接口出现异常"且接口报404问题在调试layui.upload上传图片时候报错"请求上传接口出现异常": 且接口 ...
ant react 上传_React实战之Ant Design—Upload上传_附件上传
React实战之Ant Design-Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...
antd upload手动上传_SpringBoot 如何上传大文件？
最近遇见一个需要上传超大大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...
element-ui upload 组件附带额外参数进行上传（一个或多个参数）
element-ui upload 组件附带额外参数进行上传(一个或多个参数),实参.形参均可以传. 正常情况: 附带额外参数进行上传(一个或多个参数)时-------使用箭头函数: HTML部分: ...
antd upload手动上传_antd 手动上传文件
先说我要实现的效果:我想用antd 的 upload 实现手动上传文件,上传文件时还有附加参数我看了官网上说在beforeUpload中返回false,然后通过按钮点击事件触发上传. Q1:附加参数 ...
layui 文件上传（upload）实例重载及重新上传
layui 文件上传(upload)实例重载及重新上传平时的话是真用不到这两个东西,咱先不考虑其他问题,直接看接口,是这样的:1,用户上传文件(这是个接口),上传完之后会返回上传的数据,进行回显,预 ...
element ui upload组件文件上传一次后，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。
问题: Element UI Upload 组件文件上传一次后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...

upload单独上传和统一上传

upload单独上传和统一上传

upload单独上传和统一上传相关推荐

最新文章

热门文章