<input type="file" accept="image/*" class="inputer" id="file_img" ref="inputRef" @change="handleChange($event)" multiple="multiple" >
methods: {
preSelect () {
//点击上传图片之前
this.$refs.inputRef.click();
},
close_shake(){
this.show_shake = false;
this.shake_img = "";
},
shake_info(da){
let that = this;
that.show_shake = true;
that.shake_data = da;
},
handleChange (e) {
/* eslint-disable */
//点击上传图片事件
// console.log(e)
let BreakException = {};
// let file = e.target.files;
let that = this;
let resultFile = document.getElementById('file_img').files;
// let resultFile = this.$refs.inputRef.files;
// console.log(resultFile)
// return;
if(resultFile) {
console.log(resultFile)
for (var i=0;i<resultFile.length;i++){
alert(JSON.stringify(resultFile[i]))
}
resultFile.forEach(element=>{
alert()
let files = element;
let Imgtit = element.name.split(".")[0];
let reader = new FileReader();
reader.readAsDataURL(files);
reader.onload = function (e) {
console.log(element)
let Img = new Image();
Img.src = e.target.result;
Img.onload = function (da) {
let check_imgInfo = that.check_Allinfo[Imgtit];
let error_bool = false;
let qualified_width = Img.width;
let qualified_height = Img.height;
if (check_imgInfo) {
if (check_imgInfo.width != Img.width || check_imgInfo.height != Img.height) {
error_bool = true;
qualified_width = check_imgInfo.width;
qualified_height = check_imgInfo.height;
}
that.check_Allinfo[Imgtit].is_show = true;
}
that.imgList.push({
tit: Imgtit,
name: files.name,
path: Img.src,
width: Img.width,
height: Img.height,
error: error_bool,
qualified_width: qualified_width,
qualified_height: qualified_height
})
}
}
})
return;
console.log(resultFile.length)
for (var i = 0; i<resultFile.length; i++) {
console.log(i)
let files = resultFile[i]
let Imgtit = files.name.split(".")[i];
let reader = new FileReader();
reader.readAsDataURL(files);
reader.onload = function (e) {
let Img = new Image();
Img.setAttribute('crossOrigin', 'anonymous')
Img.src = e.target.result;
Img.onload = function (da) {
let check_imgInfo = that.check_Allinfo[Imgtit];
let error_bool = false;
let qualified_width = Img.width;
let qualified_height = Img.height;
if (check_imgInfo) {
if (check_imgInfo.width != Img.width || check_imgInfo.height != Img.height) {
error_bool = true;
qualified_width = check_imgInfo.width;
qualified_height = check_imgInfo.height;
}
that.check_Allinfo[Imgtit].is_show = true;
}
that.imgList.push({
tit: Imgtit,
name: files.name,
path: Img.src,
width: Img.width,
height: Img.height,
error: error_bool,
qualified_width: qualified_width,
qualified_height: qualified_height
})
}
}
let Img = new Image();
Img.setAttribute('crossOrigin', 'anonymous')
Img.src = file;
Img.onload = function (e) {
console.log(Img.width)
return;
console.log(Img)
return;
let check_imgInfo = that.check_Allinfo[Imgtit];
let error_bool = false;
let qualified_width = Img.width;
let qualified_height = Img.height;
if (check_imgInfo) {
if (check_imgInfo.width != Img.width || check_imgInfo.height != Img.height) {
error_bool = true;
qualified_width = check_imgInfo.width;
qualified_height = check_imgInfo.height;
}
that.check_Allinfo[Imgtit].is_show = true;
}
that.imgList.push({
tit: Imgtit,
name: file.name,
path: Img.src,
width: Img.width,
height: Img.height,
error: error_bool,
qualified_width: qualified_width,
qualified_height: qualified_height
})
}
return;
}
}
return;
if ((file.length + this.imgList.length) > this.fileCount) {
this.$cusToast.text('最多上传' + this.fileCount + '张图片');
return;
}
try {
file.forEach(element => {
// console.log(element)
if (!element.type || this.fileType.indexOf(element.type) === -1) {
this.$cusToast.text('图片类型错误');
throw BreakException;
} else if (element.size > this.fileMaxSize * 1024 * 1000) {
this.$cusToast.text('图片太大请重新上传');
throw BreakException;
}
});
} catch (error) {
if (e !== BreakException) throw e;
}
file.forEach(element => {
// //以base64的形式展示
let freader = new FileReader();
freader.readAsDataURL(element);
freader.onload = (e) => {
// console.log(e.target.result)
let Imgtit = element.name.split(".")[0];
let Img = new Image();
Img.src = e.target.result;
Img.onload=function (e){
// console.log(ImgCheckInfo.013_next)
let check_imgInfo = that.check_Allinfo[Imgtit];
let error_bool = false;
let qualified_width = Img.width;
let qualified_height = Img.height;
if(check_imgInfo){
if(check_imgInfo.width != Img.width || check_imgInfo.height != Img.height){
error_bool = true;
qualified_width = check_imgInfo.width;
qualified_height = check_imgInfo.height;
}
that.check_Allinfo[Imgtit].is_show=true;
}
that.imgList.push({
tit:Imgtit,
name:element.name,
path:Img.src,
width:Img.width,
height:Img.height,
error:error_bool,
qualified_width:qualified_width,
qualified_height:qualified_height
})
}
};
console.log(that.imgList)
});
this.$refs.inputRef.value="";
},
}测试了好多种都不行 erver 运行都是正常的
vue.config.js
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
module.exports = {
pluginOptions: {
publicPath: IS_PROD ? process.env.VUE_APP_PUBLIC_PATH : "./", // 默认'/'，部署应用包时的基本 URL
// outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
// assetsDir: "", // 相对于outputDir的静态资源(js、css、img、fonts)目录
lintOnSave: false,
runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
productionSourceMap: !IS_PROD, // 生产环境的 source map
parallel: require("os").cpus().length > 1,
// vue-cli-plugin-electron-builder 配置
electronBuilder: {
builderOptions: {
// 设置打包之后的应用名称
appId: 'yangchao',
productName: '520',
win: {
icon: './static/huaxin.ico',
requestedExecutionLevel: "requireAdministrator",
// 图标路径 windows系统中icon需要256*256的ico格式图片，更换应用图标亦在此处
target: [{
// 打包成一个独立的 exe 安装程序
target: 'nsis',
// 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大
arch: [
'x64',
'ia32'
]
}]
},
linux: {
// 设置linux的图标
icon: './static/huaxin.ico',
target: 'AppImage'
},
mac: {
icon: './static/huaxin.ico'
},
asar: false,
nsis: {
// 是否一键安装，建议为 false，可以让用户点击下一步、下一步、下一步的形式安装程序，如果为true，当用户双击构建好的程序，自动安装程序并打开，即：一键安装（one-click installer）
oneClick: false,
// 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
allowElevation: true,
// 允许修改安装目录，建议为 true，是否允许用户改变安装目录，默认是不允许
allowToChangeInstallationDirectory: true,
// 安装图标
installerIcon: './static/huaxin.ico',
// 卸载图标
uninstallerIcon: './static/huaxin.ico',
// 安装时头部图标
installerHeaderIcon: './static/huaxin.ico',
// 创建桌面图标
createDesktopShortcut: true,
// 创建开始菜单图标
createStartMenuShortcut: true
}
},
chainWebpack: config => {
// 添加别名
config.resolve.alias
.set("@", resolve("src"))
.set("@assets", resolve("src/assets"))
.set("@components", resolve("src/components"))
.set("@router", resolve("src/router"))
.set("@static", resolve("src/static"));
},
chainWebpackRendererProcess: config => {
config.plugin('define').tap(args => {
args[0].IS_ELECTRON = true
return args
})
}
}
}
};
用elementui的el-upload控件上传非常方便。
您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632
非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！
速戳参与调研>>>https://t.csdnimg.cn/Kf0y