vue + elementUI 图片上传阿里云服务器 返回在线地址 发送给后台

html 部分

<el-form>

 <el-form-item label="" class="">

<h4 style='margin-top: 0;'>您所选择的封面图：</h4><span style="font-size:15px;color:crimson;">(最多可上传图片1张图片)</span>

     <div id="ossfile"></div>

     <br/>

   <a id="cardzmbtn" href="javascript:void(0);" class='btn'>选择文件</a>

     <a id="postfilesd" href="javascript:void(0);" class='btn'>开始上传</a>

     <pre id="cardTips"></pre>

     <p>&nbsp;</p>

     </el-form-item>

     </el-form>

 

 

js引入部分

    import plupload from "plupload";

    import { uploader } from "../../../plupload/uploadx.js"; //可以选择需要的方法引入

    import { get_uploaded_object_name } from '../../../plupload/uploadx.js' //可以选择需要的方法引入

    import { getSelectImageName } from '../../../plupload/uploadx.js' //可以选择需要的方法引入   注意这里所哟偶的路径都是相对的视情况而定

 

mounted

mounted() {

            //上传文件 提交按钮 区域识别 0

            uploader("cardzmbtn", "postfilesd", "ossfile", "cardTips");

      

        }

 

 

methods部分

 

var ossfile =document.getElementById('ossfile').parentNode.getElementsByTagName("b");

var showFigurelist1=[];

                for(var i=0;i<ossfile.length; i++){

// console.log(ossfile[i].getAttribute("details"));

showFigurelist1=ossfile[i].getAttribute("details");

                // console.log(showFigurelist1)

                // return false;

}

             that.staffinfoForm.showFigure.push(showFigurelist1);

 

 

 

 

最后需要引入uploadex文件

import plupload from 'plupload';

import axios from 'axios';

var accessid = ''

var accesskey = ''

var host = ''

var policyBase64 = ''

var signature = ''

var callbackbody = ''

var filename = ''

var key = ''

var expire = 0

var g_object_name = ''

var g_object_name_type = ''

var timestamp = Date.parse(new Date()) / 1000;

var now = timestamp;

var serverUrl = 'http://192.168.1.148:8080/aliyunOss/getSign';

var suffix = '';

 

function send_request() {

var xmlhttp = null;

if (window.XMLHttpRequest) {

xmlhttp = new XMLHttpRequest();

}

else if (window.ActiveXObject) {

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

 

if (xmlhttp != null) {