1.12 上传图片加水印

src/api/website/newsCategory/index.js

@@ -13,71 +13,82 @@ import fetch from 'utils/fetch';
 /**
  * 获取所有新闻类型
  */
-export function getAllnewsType(){
-    return fetch({
-        url: '/api/website/newsType/app/unauth/getAll',
-        method: 'get'
-    });
+export function getAllnewsType() {
+  return fetch({
+    url: '/api/website/newsType/app/unauth/getAll',
+    method: 'get'
+  });
 }
 
 /**
  * 分页获取新闻类型
- * @param {Object} obj 
+ * @param {Object} obj
  */
-export function getListnewsType(obj){
-    return fetch({
-        // url: '/api/website/newsType/getList',
-        url: '/api/website/newsType/getList',
-        method: 'get',
-        params: obj
-    });
+export function getListnewsType(obj) {
+  return fetch({
+    // url: '/api/website/newsType/getList',
+    url: '/api/website/newsType/getList',
+    method: 'get',
+    params: obj
+  });
 }
 
 /**
  * 添加或更新新闻类型
- * @param {Object} obj 
+ * @param {Object} obj
  */
-export function addUpdateNewsType(obj){
-    return fetch({
-        url: '/api/website/newsType/addUpdate',
-        method: 'post',
-        data: obj
-    });
+export function addUpdateNewsType(obj) {
+  return fetch({
+    url: '/api/website/newsType/addUpdate',
+    method: 'post',
+    data: obj
+  });
 }
 
 /**
  * 分页查询新闻资讯
- * @param {Object} obj 
+ * @param {Object} obj
  */
-export function getListNewsInfo(obj){
-    return fetch({
-        url: '/api/website/newsInfo/getList',
-        method: 'get',
-        params: obj
-    });
+export function getListNewsInfo(obj) {
+  return fetch({
+    url: '/api/website/newsInfo/getList',
+    method: 'get',
+    params: obj
+  });
 }
 
 /**
  * 添加或更新新闻资讯
- * @param {Object} obj 
+ * @param {Object} obj
  */
-export function addUpdateNewsInfo(obj){
-    return fetch({
-        url: '/api/website/newsInfo/addUpdate',
-        method: 'post',
-        data: obj
-    });
+export function addUpdateNewsInfo(obj) {
+  return fetch({
+    url: '/api/website/newsInfo/addUpdate',
+    method: 'post',
+    data: obj
+  });
 }
 
 /**
  * 上传图片
- * @param {Object} obj 
+ * @param {Object} obj
  */
-export function uploadFile(obj){
-    return fetch({
-        url: '/api/universal/file/app/unauth/admin/upload',
-        method: 'post',
-        data: obj
-    });
+export function uploadFile(obj) {
+  return fetch({
+    url: '/api/universal/file/app/unauth/admin/upload',
+    method: 'post',
+    data: obj
+  });
 }
 
+/**
+ * 上传图片加水印
+ * @param {Object} obj
+ */
+export function uploadFileshuiy(obj) {
+  return fetch({
+    url: '/api/universal/file/admin/uploadDispose?size=50&alpha=0.4',
+    method: 'post',
+    data: obj
+  });
+}

src/components/Upload/singleImageXX.vue

+<template>
+  <div class="upload-container">
+    <el-upload
+      v-show="!value"
+      :ref="refName"
+      drag
+      v-loading="uploading"
+      action="#"
+      :http-request="onUploadRequest"
+      :show-file-list="false"
+      :multiple="false"
+      :limit="1"
+    >
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">
+        <em>点击上传</em>
+      </div>
+
+      <div class="el-upload__text">只能上传1张图片,将对图片进行压缩加水印</div>
+    </el-upload>
+    <div class="image-preview" v-show="value">
+      <div class="image-preview-wrapper">
+        <img :src="value" />
+        <div class="image-preview-action">
+          <i @click="rmImage" class="el-icon-delete"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 预览效果见专题
+import { uploadFile, uploadFileshuiy } from "@/api/website/newsCategory/index";
+export default {
+  name: "singleImageX",
+  props: {
+    refName: {
+      type: String,
+      default: "upload",
+    },
+    //图片地址
+    value: {
+      type: String,
+      default: () => "",
+    },
+  },
+  data() {
+    return {
+      uploading: false,
+    };
+  },
+  mounted() {
+    this.$bus.$on("upload-clearFiles", this.clearFiles);
+  },
+  beforeDestroy() {
+    this.$bus.$off("upload-clearFiles");
+  },
+  methods: {
+    //清空上传过的图片
+    clearFiles() {
+      this.$refs[this.refName].clearFiles();
+    },
+    //删除图片
+    rmImage() {
+      this.clearFiles();
+      this.emitFunc("", null);
+    },
+    //上传请求
+    onUploadRequest(data) {
+      this.uploading = true;
+      let fileObj = data.file;
+      //获取图片详情信息
+      let imgInfo = {};
+      let temp = URL.createObjectURL(fileObj);
+      let img = new Image();
+      img.src = temp;
+      img.onload = function () {
+        imgInfo.width = img.width;
+        imgInfo.height = img.height;
+      };
+      imgInfo.size = fileObj.size;
+      imgInfo.type = fileObj.type;
+      // FormData 对象
+      let form = new FormData();
+      // 文件对象
+      form.append("file", fileObj);
+
+      uploadFileshuiy(form).then((res) => {
+        this.uploading = false;
+
+        if (res.status == 200) {
+          this.emitFunc(res.data, imgInfo);
+        } else {
+          this.emitFunc("", null);
+          this.$message.error(res.message);
+        }
+      });
+    },
+    //组件通信
+    emitFunc(val, info = null) {
+      this.$emit("input", val, info);
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "src/styles/mixin.scss";
+.upload-container {
+  width: 100%;
+  display: flex;
+  @include clearfix;
+  .image-uploader {
+    width: 60%;
+    float: left;
+  }
+  .image-preview {
+    width: 200px;
+    height: 200px;
+    position: relative;
+    border: 1px dashed #d9d9d9;
+    float: left;
+    .image-preview-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .image-preview-action {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      cursor: default;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+      font-size: 20px;
+      background-color: rgba(0, 0, 0, 0.5);
+      transition: opacity 0.3s;
+      cursor: pointer;
+      text-align: center;
+      line-height: 200px;
+      .el-icon-delete {
+        font-size: 36px;
+      }
+    }
+    &:hover {
+      .image-preview-action {
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/utils/fetch.js

@@ -11,14 +11,14 @@ import {
 // 创建axios实例
 const service = axios.create({
   baseURL: process.env.BASE_API, // api的base_url
-  timeout: 20000 // 请求超时时间
+  timeout: 600000 * 5 // 请求超时时间
 });
 
 // request拦截器
 service.interceptors.request.use(config => {
   // Do something before request is sent
   if (store.getters.token) {
-    config.headers['Authorization'] = getToken(); // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
+    config.headers.Authorization = getToken(); // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
   } else {
     // config.headers['RequestType'] = 'OPERATE';
   }
@@ -73,7 +73,7 @@ service.interceptors.response.use(
     } else {
       return response.data;
     }
-  }, (err) => { // 这里是返回状态码不为200时候的错误处理
+  }, err => { // 这里是返回状态码不为200时候的错误处理
     if (err && err.response) {
       switch (err.response.status) {
         case 400:

src/views/webSiteManagement/imageLibrary/edit.vue

@@ -255,7 +255,7 @@
 </template>
 
 <script>
-import MyUpload from "@/components/Upload/singleImageX"; //上传组件
+import MyUpload from "@/components/Upload/singleImageXX"; //上传组件
 
 import { update, getAll, getDetail } from "@/api/website/imageLibrary";
 import KindEditor from "@/components/Kindeditor";