vue 部分
<el-upload
ref="upload"
class="avatar-uploader define-uploader"
accept=".jpg, .jpeg, .png"
:file-list="fileList"
:auto-upload="false"
:show-file-list="false"
action
:http-request="carouselUpload"
:on-change="handleChange"
>
<img
v-if="imageUrl"
:src="imageUrl"
class="avatar"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-button plain @click="uploadFile()">手动上传</el-button>
js部分
<script>
export default{
data(){
fileList: [],
imageUrl:"",
},
methods:{
handleChange(file, fileList) {
var _this = this;
const isTypeTrue = /^image\/(jpeg|png|jpg)$/.test(file.raw.type);
const isLt300K = file.raw.size / 1024 < 300;
// _this.saveData.imageUrl ="";
if (!isLt300K) {
this.$message.error("上传图片大小不能超过300K!");
return;
}
if (!isTypeTrue) {
this.$message.error("上传图片格式不对!");
return;
}
new Promise(function(resolve, reject) {
//upload内部需要一个promise,简单的return出false并没有什么用
let width = 714;
let height = 280;
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.raw); //onload是异步加载
}).then(
() => {
_this.imageUrl = URL.createObjectURL(file.raw);
console.log("222");
return file.raw;
},
() => {
this.$message.error("上传的图片必须是714*280!");
return Promise.reject();
}
);
if (fileList.length > 0) {
this.fileList = [fileList[fileList.length - 1]]; // 这一步,是 展示最后一次选择的csv文件
}
},
carouselUpload(param) {
//此处写手动上传的方法,上传的地址及方式;
},
//手动上传
uploadFile(){
//这里上传的执行的就是carouselUpload() 方法;
this.$refs.upload.submit();
}
}
}
</script>