vue+elementUIで作った画像アップロードコンポーネント
コンポーネントパッケージ需要分析のアップロード
elementUIライブラリに基づくショッピングモールのバックグラウンド管理では、さまざまな商品画像情報を入力する必要があるため、最も需要のあるのは商品管理フォームです.バックグラウンドに2 M未満の画像を渡すように要求されたため、uploadがカプセル化された.vueコンポーネントは、画像のアップロードロジックを管理するためのアップロードページのサブコンポーネントとして使用されます.
upload.vue解析
uploadは主にフォーム上で画像をアップロードする需要を実現するために用いられ、主にinput+imgから構成されている.画像がない場合はデフォルトの画像を表示し、画像がある場合はアップロード画像を表示する.inputスタイルがあまり需要に合わないため、起を非表示に設定するだけで、display:noneに設定することはできない.そうしないとinputのchangeイベントはトリガーされません
upload.vueコードは次のとおりです.
商品ページでuploadコンポーネントを使用
good.vueではuploadコンポーネントを導入します.また、対応するフォームオブジェクト、アップロードするピクチャタイプのプロパティ、およびサブコンポーネントへのピクチャ表示スタイルを渡します.
good.vueコアコード:
最後に書く
画像のアップロードについては前にも小さなプログラムバージョンを書いたことがありますが、全体的にpc端の画像のアップロードは小さなプログラムよりも複雑で、このパッケージは現在の単図のアップロードの需要を満たすしかありません.彼の不足点もあります.もちろん多図アップロードにも拡張できますが、多図アップロードに関するネット上にも多くの例があります.ここではこれ以上詳しく述べない.
elementUIライブラリに基づくショッピングモールのバックグラウンド管理では、さまざまな商品画像情報を入力する必要があるため、最も需要のあるのは商品管理フォームです.バックグラウンドに2 M未満の画像を渡すように要求されたため、uploadがカプセル化された.vueコンポーネントは、画像のアップロードロジックを管理するためのアップロードページのサブコンポーネントとして使用されます.
upload.vue解析
uploadは主にフォーム上で画像をアップロードする需要を実現するために用いられ、主にinput+imgから構成されている.画像がない場合はデフォルトの画像を表示し、画像がある場合はアップロード画像を表示する.inputスタイルがあまり需要に合わないため、起を非表示に設定するだけで、display:noneに設定することはできない.そうしないとinputのchangeイベントはトリガーされません
upload.vueコードは次のとおりです.
<template>
<div>
<div class="upload-box" :style="imgStyle">
<input type="file" :ref="imgType$1" @change="upload(formVal$1,imgType$1)" class="upload-input" />
<img :src="formVal$1[imgType$1]?formVal$1[imgType$1]:'static/img/upload.jpg'" />
div>
div>
template>
<script>
/*
（mainImg） (detailImg) (plusImg)
lrz,
npm install lrz --save
*/
import lrz from 'lrz';
export default {
name: 'uploadImg', //
props: {
formVal: {
type: Object, //props （ ）
required: true,
default: {}
},
imgType: { // example:mainImg
type: String,
required: true,
default: ''
},
imgStyle: {
type: Object, //
required: true //
}
},
created: function() {
//
},
data: function() {
/*
,
*/
let formVal$1 = this.formVal;
let imgType$1 = this.imgType;
return {
formVal$1,
imgType$1,
uploadUrl: url,// url
};
},
methods: {
upload: function(formVal, imgType) {
var self = this;
// ， ，
var loadingInstance = this.$loading({
text: ' '
});
var that = this.$refs[imgType].files[0]; // file
//
var testUrl = this.uploadUrl; //
try {
//lrz
lrz(that)
.then(function(message) {
var formData = message.formData; // formData
self.$axios
.post(testUrl, formData)
.then(function(res) {
console.log(res);
if (res && res.data.iRet == 0) {
formVal[imgType] = res.data.objData.sUrl;
// change
self.$refs[imgType].value = '';
/*
elementUI ，
*/
self.$emit('clearValidate', imgType);
self.$nextTick(() => {
// Loading
loadingInstance.close();
});
} else {
throw res.data.sMsg;
}
})
.catch(function(err) {
self.$nextTick(() => {
// Loading
loadingInstance.close();
});
//
alert(err);
});
})
.catch(function(err) {
self.$nextTick(() => {
loadingInstance.close();
});
});
} catch (e) {
//
self.$nextTick(() => {
loadingInstance.close();
});
}
}
},
mounted: function() {},
watch: {
/*
.
,
*/
formVal: {
handle: function(newVal, oldVal) {
var imgType = this.imgType;
if (newVal[imgType] == '') {
// js ref ，
document.getElementsByClassName('upload-input')[0].value = '';
}
}
}
}
};
script>
<style scoped>
/*
。
*/
.upload-box {
position: relative;
height: 100px;
width: 100px;
overflow: hidden;
}
.upload-box img {
width: 100%;
height: 100%;
}
.upload-box .upload-input {
position: absolute;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
}
style>
商品ページでuploadコンポーネントを使用
good.vueではuploadコンポーネントを導入します.また、対応するフォームオブジェクト、アップロードするピクチャタイプのプロパティ、およびサブコンポーネントへのピクチャ表示スタイルを渡します.
good.vueコアコード:
<template>
<el-form ref="form" :model="form" label-width="80px" label-position="top" :rules="rules">
<el-form-item label=" " prop="sDetailImg" ref="sDetailImg">
<uploadImg :form-val="form" :img-type="'sDetailImg'" :img-style="detailImgStl" @clearValidate="clearValidate">uploadImg>
el-form-item>
<el-form-item>
<el-row style="text-align:center;">
<el-button type="primary" size="medium" @click.stop="submit('form')" v-if="!form.ID"> el-button>
<el-button type="primary" size="medium" @click.stop="submit('form')" v-else-if="form.ID"> el-button>
<el-button size="medium" @click.stop="resetForm('form')"> el-button>
el-row>
el-form-item>
el-form>
template>
<script>
import uploadImg from "../common/uploadImg"; //
export default {
name: "good", //
data: function() {
return {
form: {
ID: NULL,
//
sDetailImg: "" //
},
detailImgStl: {
width: "350px",
height: "150px"
},
rules: {
sDetailImg: [{
required: true,
message: " ",
trigger: "change"
}],
}
}
},
methods: {
// ， bug
clearValidate: function(imgName) {
//
this.$refs[imgName].clearValidate();
},
//
resetForm: function(formName) {
this.confirm(" ", function(self) {
self.$refs[formName].resetFields();
})
}
},
}
script>
最後に書く
画像のアップロードについては前にも小さなプログラムバージョンを書いたことがありますが、全体的にpc端の画像のアップロードは小さなプログラムよりも複雑で、このパッケージは現在の単図のアップロードの需要を満たすしかありません.彼の不足点もあります.もちろん多図アップロードにも拡張できますが、多図アップロードに関するネット上にも多くの例があります.ここではこれ以上詳しく述べない.