|
@@ -9,8 +9,9 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item label="品牌LOGO:">
|
|
|
<div class="logo">
|
|
|
- <el-upload style="flex: 1" class="avatar-uploader" action="#" :http-request="uploadAndSubmit"
|
|
|
- :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
|
|
+ <el-upload style="flex: 1;" class="avatar-uploader" action="#" :http-request="uploadAndSubmit"
|
|
|
+ :show-file-list="false" :before-upload="beforeAvatarUpload">
|
|
|
+ <i v-if="ruleForm.BrandLogo" class="el-icon-error delete-image" @click.stop="handleClickDelImg"></i>
|
|
|
<img v-if="ruleForm.BrandLogo" :src="`/image-service/common/image_get?systemId=dataPlatform&key=${ruleForm.BrandLogo}`" class="avatar">
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload>
|
|
@@ -41,7 +42,6 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import { brandCreate, brandDelete, brandUpdate } from "@/api/brand"
|
|
|
-import { imageUpload } from "@/api/image-service"
|
|
|
export default {
|
|
|
name: "addBrand",
|
|
|
props: {
|
|
@@ -62,40 +62,19 @@ export default {
|
|
|
rules: {
|
|
|
BrandCname: [{ required: true, message: '请输入中文名称', trigger: 'blur' }],
|
|
|
},
|
|
|
- key: "",//上传图片的标识
|
|
|
+ key: "",
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- handleAvatarSuccess(res, file) {
|
|
|
- this.ruleForm.BrandLogo = this.key
|
|
|
- // this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
- },
|
|
|
- uploadAndSubmit(item, key) {
|
|
|
- let file = item.file;
|
|
|
- // try sending
|
|
|
- let reader = new FileReader();
|
|
|
-
|
|
|
- let vm = this;
|
|
|
-
|
|
|
- let fileType = file.name.split(".");
|
|
|
- let type = fileType[fileType.length - 1];
|
|
|
- let CreateTime = tools.formatDate(new Date(file.lastModified))
|
|
|
-
|
|
|
- let uploadKey = file.uid
|
|
|
- if (!!key) {
|
|
|
- uploadKey = key
|
|
|
- }
|
|
|
-
|
|
|
- reader.onloadstart = function () {
|
|
|
- // 这个事件在读取开始时触发
|
|
|
- };
|
|
|
- reader.onprogress = function (p) {
|
|
|
- // 这个事件在读取进行中定时触发
|
|
|
- };
|
|
|
+ uploadAndSubmit(item) {// 上传图片
|
|
|
+ let file = item.file
|
|
|
+ let _this = this
|
|
|
+ //获取文件后缀名
|
|
|
+ let fileType = file.name.split('.')
|
|
|
+ let type = fileType[fileType.length -1]
|
|
|
+ this.key = `${file.uid}.${type}`
|
|
|
|
|
|
- reader.onload = function () {
|
|
|
- // 这个事件在读取成功结束后触发
|
|
|
- };
|
|
|
+ let reader = new FileReader();
|
|
|
reader.onloadend = function () {
|
|
|
// 这个事件在读取结束后,无论成功或者失败都会触发
|
|
|
if (reader.error) {
|
|
@@ -103,13 +82,13 @@ export default {
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
xhr.open(
|
|
|
"POST",
|
|
|
- vm.imageUploadUrl + "&key=" + uploadKey + "." + type
|
|
|
+ `/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=${_this.key}`
|
|
|
);
|
|
|
xhr.send(reader.result);
|
|
|
xhr.onreadystatechange = function () {
|
|
|
if (xhr.readyState == 4) {
|
|
|
if (xhr.status == 200) {
|
|
|
- vm.$emit("change", vm.imagesArr, vm.defined, vm.videoPicArr);
|
|
|
+ _this.ruleForm.BrandLogo = _this.key
|
|
|
}
|
|
|
}
|
|
|
};
|
|
@@ -121,21 +100,19 @@ export default {
|
|
|
const typeList = ['image/jpeg','image/png','image/gif']
|
|
|
const isType = typeList.some(item => {return item === file.type});
|
|
|
const isLt80K = file.size / 1024 <= 80;
|
|
|
- //获取文件后缀名
|
|
|
- let fileType = file.name.split('.')
|
|
|
- let type = fileType[fileType.length -1]
|
|
|
-
|
|
|
- this.key = `${file.uid}.${type}`
|
|
|
- this.$refs.imgUpload.action = `/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=${this.key}`
|
|
|
-
|
|
|
if (!isType) {
|
|
|
this.$message.error('上传头像图片格式不支持!')
|
|
|
+ return false
|
|
|
}
|
|
|
if (!isLt80K) {
|
|
|
this.$message.error('上传头像图片大小不能超过 80K!')
|
|
|
+ return false
|
|
|
}
|
|
|
return isType && isLt80K;
|
|
|
},
|
|
|
+ handleClickDelImg() {
|
|
|
+ this.ruleForm.BrandLogo = ""
|
|
|
+ },
|
|
|
submitForm(formName) { //(添加/修改)
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
if (valid) {
|
|
@@ -210,6 +187,15 @@ export default {
|
|
|
margin-left: 8px;
|
|
|
margin-bottom: 78px;
|
|
|
}
|
|
|
+ .delete-image {
|
|
|
+ color: rgba(31,36,41,0.5);
|
|
|
+ position:absolute;
|
|
|
+ top:5px;
|
|
|
+ right:5px;
|
|
|
+ }
|
|
|
+ .delete-image:hover {
|
|
|
+ color: #F56C6C;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|