Environment: Nuxt.js (Vue family bucket +webpack+bable)

Component library: element.ui

Application scenario: Interactive pages separated from the page layout, similar to dialog boxes and drawers

Global call plug-in implementation principle:

  • Use the Dialog component of element. UI to display and close the page
<template> <el-dialog :visible. Sync ="show"> < button@click ="close"> </el-dialog> </template>Copy the code
Name: "ImgUpload", props: {// Pass in the vue instance, this pointer. That: {type: Object}}, data() {return {show: }}, methods:{// initialize confirm() {this.show = true; return new Promise((resolve, reject) => { this.promiseStatus = { resolve, reject }; }); }, // close(){this.show = false; / / click cancel on this to send data to the page after this. PromiseStatus && enclosing promiseStatus. Reject (/ / data)}, / / sure, sure close the page () {this. Show = false; / / click here to send data to the page after this. PromiseStatus && enclosing promiseStatus. Resolve (/ / data)}}Copy the code
  • Mount the written VUE components as functions to the VUE prototype
import Vue from "vue"; import ImgUpload from "./ImgUpload.vue"; const Vuecomponent = Vue.extend(ImgUpload); const vm = new Vuecomponent().$mount(); let init = false; const install = options => { Object.assign(vm, options); if (! init) { document.body.appendChild(vm.$el); init = true; } return vm.confirm(); }; export default install;Copy the code
import ImgUpload from "@/components/ImgUpload.js";
Vue.prototype.$imgUpload = ImgUpload;
Copy the code
  • Call way
<button @click="imgUpload"> </button> </template>Copy the code
<script> export default { methods: { imgUpload(){ this.$imgUpload({that:this}).then(res=>{console.log(res); }); }}}; </script>Copy the code

Server signature, web side directly upload pictures to Ali Cloud OSS

There are three ways to upload files to Ali Cloud OSS on the Web and related rules are as follows

Upload data to Ali Cloud OSS on the web

Direct transmission after signature on the server

PostObject

The method adopted in this paper is PostObjecj, which uploads an Object to a specified storage space (Bucket) through an HTML form.

Aliyun can only upload files one by one, and the key value (file path) returned by the server is different each time. Therefore, through the way of circular file list, request the signature to the server one by one and upload it to Ali Cloud OSS in the form of form. After uploading, the picture path will be uniformly returned to the server.

Note 1: The host address returned by the server may change, so this article does not configure the host address into the global environment of NUXT.

Note 2: AxiOS has a uniform prefix/API configuration to facilitate project interface writing, so the plug-in uses native Ajax.

<script> export default {methods: {// select an image and click upload() {let vim = this.that; let _this = this; $canUpload({album_id: * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * this.album_id }).then(res => { if (res.data.code === 200) { postObject(); } else {vim.$message.info(" This album cannot upload pictures "); }}); / / use formData uploaded to ali OSS function the postObject () {_this. UploadPicFile. ForEach ((PIC, index) => { vim.$getOSS().then(secret => { let SECRET = secret.data; let filename = "-" + pic.width + "*" + pic.height + pic.type; let formData = new FormData(); formData.append("key", SECRET.key + filename); // File path stored in oss + file name formdata.append ("OSSAccessKeyId", secret.accessid); //accessKeyId formData.append("policy", SECRET.policy); //policy formData.append("Signature", SECRET.signature); // Sign formData.append("success_action_status", 200); Formdata.append ("file", pic.file); formData.append("file", pic.file); // file let XHR = new XMLHttpRequest(); xhr.open("POST", "https://" + SECRET.host, true); xhr.onload = function() { if (xhr.status === 200) { pic.wholePath = SECRET.host + "/" + SECRET.key + filename; } else {vim.$message.error(" Some images failed to upload "); } / / after uploading the last a unified message to the server if the picture (the index = = = _this. UploadPicFile. Length - 1) {postPicInfo (); }}; xhr.send(formData); }); }); } / / to unified image path and related information to the server function postPicInfo () {let successPics = _this. UploadPicFile. Filter (ele = > {return Object.keys(ele).includes("wholePath"); }); let data = {}; successPics.forEach((pic, index) => { data[`insert[${index}][pic_name]`] = pic.name; data[`insert[${index}][pic_desc]`] = pic.name; data[`insert[${index}][album_name]`] = _this.albumName; data[`insert[${index}][album_id]`] = _this.albumId; data[`insert[${index}][pic_url]`] = pic.wholePath; }); Then (res => {if (res.data.code === 200) {vim.$message. }}); }}}}; </script>Copy the code
Possible thinking direction: Upload component of ANTD component library, etc.