/* 获取 文件名 */
let IMG = "1235646SDANJFA45645665.jpg";
let reg = IMG.replace(/(.*/)*([^.]+).*/ig, "$2");
console.log(reg) //1235646SDANJFA45645665
//替换文件名
let replaceFifle = reg.replace(reg, "准备替换的内容")
console.log(replaceFifle) //准备替换的内容
/* 获取 文件扩展 */
let IMG = "1235646SDANJFA45645665.jpg";
let reg = IMG.split('.').pop();
console.log(reg); //jpg
//限制文件大小2MB以下,只能是jpg、png格式、宽高只能为1920*1820
beforeUpload(param){
const isJPG = param.type === 'image/jpeg';
const isPNG = param.type === 'image/png';
const isLt2M = param.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
}
if (isPNG || isJPG) {
//执行代码.....
}else{
this.$message.error('上传图片的格式只能是 JPG或PNG 格式!')
}
const isSize = new Promise(function(resolve, reject) {
let width = 320;
let height = 320;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function() {
let valid = img.width == width && img.height == height;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(() => {
return file;
}, () => {
this.$message.error('上传的图片宽高必须是320*320!');
return Promise.reject();
});
return isJPG && isLt2M && isPNG;
},
//普通文件上传 uploadFile(param){ this.file = param.file; this.key = param.file.name; let form = new FormData(); form.append("file", this.file); form.append("key", this.key); },
还有一种是input把type改成file。
<input type="file" name value @change="tirggerFile($event)" id="hiddenInput" />
tirggerFile(event){
let file = event.target.files[0];
this.files = file;
this.keys = file.name;
let param = new FormData();
param.append("file", this.files);
param.append("key", this.keys);
//后面代码与upload类似,请求后端。略过。
}
//修改el-upload上传文件名 使用 beforeUpload 钩子函数,强制修改文件名 beforeUpload (file){ const copyFile = new File([file], '需要修改的名称'); this.UploadFile(copyFile) return false } UploadFile(param){ let params = new FormData(); params.append("file", param); params.append("key", "key"); API.uploadRpx(params).then(res=>{ //.......... }) }
批量上传文件,请求一次接口
<template>
<div>
<el-button type="primary" size="mini" plain @click="uploadImg"
>确认上传</el-button
>
<el-button type="primary" size="mini" plain @click="fileList = []"
>取消</el-button
>
<el-upload
action="#"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="fileList"
:on-error="handleUploadError"
:on-change="handleChange"
:limit="limits"
:auto-upload="false"
:multiple="true"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>
<script>
import { uploadPic } from '@/api/asset'
export default {
name: 'UploadPic',
props: {
limits: {
type: Number,
default: 5
}
},
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
fileList: [] // fileList数组
}
},
methods: {
handleRemove(file, fileList) {
const picList = []
for (let i = 0; i < this.fileList.length; i++) {
if (this.fileList[i].uid !== file.uid) {
picList.push(this.fileList[i])
}
}
this.fileList = picList
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
// 上传失败
handleUploadError() {
this.$message({
type: 'error',
message: '上传失败'
})
this.loading.close()
},
handleChange(params) {
const isLt2M = params.size / 1024 / 1024 < 2
const isPNG = params.raw.type === 'image/png'
const isJPEG = params.raw.type === 'image/jpeg'
const isJPG = params.raw.type === 'image/jpg'
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!')
return
}
if (isPNG || isJPEG || isJPG) {
this.fileList.push(params)
return false
} else {
this.$message.error('上传图片的格式只能是 JPG或PNG 格式!')
return
}
},
uploadImg() {
if (this.fileList.length === 0) {
this.$notify({
title: '警告',
type: 'warning',
duration: 2000,
message: '请选择图片进行上传'
})
return
}
this.loadingImg()
const formData = new FormData()
this.fileList.forEach(item => {
formData.append('file', item.raw)
console.log(item.raw)
})
// this.loading.close()
// uploadPic(formData).then(res => {
// if (res.code === 200) {
// this.fileList = []
// this.$message.success({
// message: '上传成功',
// duration: 2000
// })
// }
// })
// // eslint-disable-next-line handle-callback-err
// .catch(error => {
// this.$message.error('上传失败,请重新上传')
// this.loading.close()
// })
},
loadingImg() {
this.loading = this.$loading({
lock: true,
text: '上传中...',
background: 'rgba(0,0,0,0.7)'
})
}
}
}
</script>
<style lang="scss" scoped>
// /* 推荐,实现简单 */
// /deep/.el-upload-list__item.is-ready {
// display: none;
// }
</style>