头像

src/api/publisher/publish.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import Vue from "vue";
 // 新增发行人
 export function addpublish(data){
     return request({
@@ -21,4 +22,13 @@ export function searchPublish(id){
         url: '/system/issuer/' +id,
         
       })
-}
+}
+
+// 上传文件
+export function upload(url, data) {
+    return Vue.$http.post(url, data, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  }

src/views/publishers/addPublisher.vue

@@ -31,28 +31,30 @@
 
           <el-form-item label="上传头像" prop="headPortrait">
             <el-upload
-              :show-file-list="false"
-              :style="{
-                border: '1px dashed #d9d9d9',
-                borderRadius: '6px',
-                width: '178px',
-                height: '178px',
-              }"
               v-model="pubform.headPortrait"
-              action="aaa"
+              action="/file/upload"
+              :http-request="customHttpResqust"
+              :auto-upload="true"
+              list-type="picture-card"
+              accept="image/*"
+              :limit="1"
+              show-file-list
+              :file-list="fileList"
+              enctype="multipart/form-data"
             >
-              <i slot="default" class="el-icon-plus" 
-              :style="{
-                  width: '178px',                
-                  lineHeight: '178px',
-                  textAlign: 'center'}"></i>
+              <i
+                slot="default"
+                class="el-icon-plus"
+                :style="{
+                  textAlign: 'center',
+                }"
+              ></i>
               <div slot="file" slot-scope="{ file }">
                 <img
                   class="el-upload-list__item-thumbnail"
                   :src="file.url"
                   alt=""
                 />
-                
               </div>
             </el-upload>
           </el-form-item>
@@ -73,13 +75,14 @@
     </div>
   </div>
 </template>
-
+<!--  -->
 <script>
-import { addpublish } from "../../api/publisher/publish";
+import { addpublish, upload } from "../../api/publisher/publish";
 export default {
   name: "addPublisher",
   data() {
     return {
+      fileList: [], //上传的文件列表
       pubform: {
         collectionTitle: "",
         issuerName: "",
@@ -97,32 +100,56 @@ export default {
       },
     };
   },
+  watch: {},
   methods: {
-    
+    handleAvatarSuccess() {
+      console.log("上传成功");
+    },
+    async customHttpResqust({ action, data, file, filename }) {
+      // console.log(action,data,file,filename)
+      console.log(action)
+      const fd = new FormData();
+      
+      for (var k in data) {
+        if (data.hasOwnProperty(k)) {
+          fd.append(k, data[k]);
+        }
+      }
+      
+      fd.append(filename, file);
+      let { code, data: d, msg } = await upload(action, fd).catch((err) => err);
+      console.log("上传成功");
+      console.log(d);
+      if (code == 200) {
+        console.log(`output->data`, d);
+        this.pubform.headPortrait = d.url;
+      }
+      console.log("上传成功");
+    },
 
-     submitpub() {
+    submitpub() {
       this.$refs.pubform.validate((valid) => {
         if (valid) {
           addpublish(this.pubform).then(() => {
-            this.pubform.collectionTitle = '';
-            this.pubform.issuerName = '';
-            this.pubform. email= "",
-            this.pubform.issuerPhone='',
-            this.pubform.issuerAddress='',
-            this.pubform.headPortrait= '',
-            this.pubform.remark=''
-          })
+            this.pubform.collectionTitle = "";
+            this.pubform.issuerName = "";
+            this.pubform.email = "";
+            this.pubform.issuerPhone = "";
+            this.pubform.issuerAddress = "";
+            this.pubform.headPortrait = "";
+            this.pubform.remark = ""
+          });
           this.$notify({
-            title: '成功',
-            message: '创建消息成功',
-            type: 'success'
+            title: "成功",
+            message: "创建消息成功",
+            type: "success",
           });
           this.$router.push("./publisherList");
         } else {
           this.$notify({
-            title: '警告',
-            message: '请填写内容',
-            type: 'warning'
+            title: "警告",
+            message: "请填写内容",
+            type: "warning",
           });
         }
       });