iview-Upload組件官網鏈接：https://iview.github.io/components/upload
效果展示
css
.out-box{
width: 100%;
border: 1px solid #e6e6e6;
border-radius: 8px;
padding: 20px 20px 10px;
}
.img-border{
border: 1px solid #e6e6e6;
border-radius: 8px;
margin-right: 20px;
width:100px;
height:100px;
}
.upload-box{
width: 100px;
height:100px;
display: inline-block
}
.upload-inner-box{
width: 100px;
height: 100px;
font-size: 40px;
text-align: center;
background: #F5F5F5;
}
.upload-tip{
color:red
}
template
<div class="out-box">
<img class="img-border" v-if="seeView" :src="this.imageUrl"? />
<Upload ref="uploadFiles"
:show-upload-list="false"
:max-size="5120"
:on-success="handleSuccess"
:on-exceeded-size="handleMaxSize"
:before-upload="beforeUploadImg"
:loading="true"
type="drag"
:format="['jpg','jpeg','png','gif']"
:on-format-error="handleFormatError"
action="url"
class="upload-box">
? ? ? ? ? ? ? ? <div class="upload-inner-box">
? ? ? ? ? ? ? ? <div style="padding-top: 20px">+</div>
? ? ? ? ? ? ? ? <div style="font-size: 12px">請上傳圖片</div>
</div>
</Upload>
<div class="upload-tip">圖片大小勿超5M荒叼，尺寸為{{minWidth}}*{{minHeight}}轿偎，勿小于該尺寸，且盡量以該長寬比制圖以保證頁面效果</div>
</div>
data
seeView:"false",//是否展示已上傳的圖片
imageUrl:"",//上傳圖片的url
url:"",//上傳的地址
minWidth:number,//最小寬度
minHeight:number,//最小高度
methods
//上傳成功
? ? handleSuccess(response, file, fileList) {
? ? ? this.imageUrl = response.result;
? ? ? this.seeView = true;
? ? },
? ? //上傳的文件大小超出要求
? ? handleMaxSize() {
? ? ? this.$Modal.warning({
? ? ? ? title: "提示",
? ? ? ? content: "上傳縮略圖大小不能超過5M!!!",
? ? ? });
? ? },
? ? //上傳文件格式不符合要求
? ? handleFormatError() {
? ? ? this.$Modal.warning({
? ? ? ? title: "提示",
? ? ? ? content: "上傳縮略圖格式錯誤!!!",
? ? ? });
? ? },
? ? //上傳前對圖片寬高的檢驗
? ? beforeUploadImg(file) {
? ? ? this.checkImageWidth(file, minWidth).then((checkWidth) => {
? ? ? ? if (checkWidth) {
? ? ? ? ? this.checkImageHeight(file, minHeight).then((checkHeight) => {
? ? ? ? ? ? if (checkHeight) {
? ? ? ? ? ? ? this.$refs.uploadFiles.post(file);
? ? ? ? ? ? }
? ? ? ? ? });
? ? ? ? }
? ? ? });
? ? ? return false;
? ? },
? ? // 異步方法 檢驗圖片寬度
? ? async checkImageWidth(file, widthCheck) {
? ? ? let width = await this.getImageWidth(file);
? ? ? let checkWidth = width > widthCheck || width == widthCheck;
? ? ? if (!checkWidth) {
? ? ? ? this.$Notice.warning({
? ? ? ? ? title: "圖片寬度錯誤",
? ? ? ? ? desc:
? ? ? ? ? ? file.name +
? ? ? ? ? ? " 的寬度為" +
? ? ? ? ? ? width +
? ? ? ? ? ? "px, 請上傳寬度大于" +
? ? ? ? ? ? widthCheck +
? ? ? ? ? ? "px的圖片. ",
? ? ? ? });
? ? ? }
? ? ? return checkWidth;
? ? },
? ? // 獲取圖片寬度
? ? getImageWidth(file) {
? ? ? return new Promise((resolve) => {
? ? ? ? const reader = new FileReader();
? ? ? ? reader.readAsDataURL(file);
? ? ? ? reader.onload = function () {
? ? ? ? ? if (reader.readyState == 2) {
? ? ? ? ? ? const img = new Image();
? ? ? ? ? ? img.src = reader.result;
? ? ? ? ? ? img.onload = function () {
? ? ? ? ? ? ? resolve(this.width);
? ? ? ? ? ? };
? ? ? ? ? }
? ? ? ? };
? ? ? });
? ? },
? ? // 異步方法 檢驗圖片高度
? ? async checkImageHeight(file, heightCheck) {
? ? ? let height = await this.getImageHeight(file);
? ? ? let checkHeight = height > heightCheck || height == heightCheck;
? ? ? if (!checkHeight) {
? ? ? ? this.$Notice.warning({
? ? ? ? ? title: "圖片高度錯誤",
? ? ? ? ? desc:
? ? ? ? ? ? file.name +
? ? ? ? ? ? " 的高度為" +
? ? ? ? ? ? height +
? ? ? ? ? ? "px, 請上傳高度大于" +
? ? ? ? ? ? heightCheck +
? ? ? ? ? ? "px的圖片. ",
? ? ? ? });
? ? ? }
? ? ? return checkHeight;
? ? },
? ? // 獲取圖片寬度
? ? getImageHeight(file) {
? ? ? return new Promise((resolve) => {
? ? ? ? const reader = new FileReader();
? ? ? ? reader.readAsDataURL(file);
? ? ? ? reader.onload = function () {
? ? ? ? ? if (reader.readyState == 2) {
? ? ? ? ? ? const img = new Image();
? ? ? ? ? ? img.src = reader.result;
? ? ? ? ? ? img.onload = function () {
? ? ? ? ? ? ? resolve(this.height);
? ? ? ? ? ? };
? ? ? ? ? }
? ? ? ? };
? ? ? });
? ? },
