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

html 部分

 

您所选择的封面图：

(最多可上传图片1张图片)

    

    

   选择文件

     开始上传

    

    

 

    

    

 

 

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

// 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) {

xmlhttp.open("GET", serverUrl, false);

xmlhttp.send(null);

return xmlhttp.responseText

}

else {

alert("Your browser does not support XMLHTTP.");

}

};

 

function check_object_radio() {

var tt = document.getElementsByName('myradio');

 

g_object_name_type = 'random_name';

 

}

 

function get_signature() {

//可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲

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

if (expire < now + 3) {

var body = send_request();

var obj = eval("(" + body + ")");

if(obj.code==1){

host = obj['data']['host'];

policyBase64 = obj['data']['policy'];

accessid = obj['data']['accessid'];

signature = obj['data']['signature'];

expire = parseInt(obj['data']['expire']);

callbackbody = obj['data']['callback'];

key = obj['data']['dir'];

return true;

}else{

alert('请求服务器异常，请联系后台人员');

}

}

return false;

};

 

function random_string(len) {

　　len = len || 32;

　　var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';

　　var maxPos = chars.length;

　　var pwd = '';

　　for (var i = 0; i < len; i++) {

pwd += chars.charAt(Math.floor(Math.random() * maxPos));

}

return pwd;

}

 

function get_suffix(filename) {

var pos = filename.lastIndexOf('.');

suffix = '';

if (pos != -1) {

suffix = filename.substring(pos)

}

return suffix;

}

 

function calculate_object_name(filename) {

// if (g_object_name_type == 'local_name')

// {

// g_object_name += "${filename}"

// }

// else if (g_object_name_type == 'random_name')

// {

// suffix = get_suffix(filename)

// g_object_name = key + random_string(10) + suffix

// }

 

suffix = get_suffix(filename)

g_object_name = key + random_string(10) + suffix;

}

 

function get_uploaded_object_name(filename) {

var ossUrl = 'http://midautumn.oss-cn-beijing.aliyuncs.com/' + g_object_name;

return ossUrl;

 

// if (g_object_name_type == 'local_name')

// {

// tmp_name = g_object_name

// tmp_name = tmp_name.replace("${filename}", filename);

// return tmp_name

// }

// else if(g_object_name_type == 'random_name')

// {

// return g_object_name

// }

}

 

function set_upload_param(up, filename, ret) {

if (ret == false) {

ret = get_signature()

}

g_object_name = key;

if (filename != '') {

suffix = get_suffix(filename)

calculate_object_name(filename)

}

var new_multipart_params = {

'key': g_object_name,

'policy': policyBase64,

'OSSAccessKeyId': accessid,

'success_action_status': '200', //让服务端返回200,不然，默认会返回204

'callback': callbackbody,

'signature': signature,

};

up.setOption({

'url': host,

'multipart_params': new_multipart_params

});

 

up.start();

console.log(up.getOption());

}

 

function getSelectImageName(id, container) {

console.log('------------id');

if (id == undefined) {

id = "selectfiles";

}

console.log(id);

// getSelectImagecontainer(container)

return id

}

 

// function getSelectImagecontainer(container){

// console.log('------------container');

// if(container==undefined){

// container="container";

// }

// console.log(container);

 

// return container

// }

 

var uploader = function (id, sure, imgContent, tips) {

var fileTypes = '';

if(id == 'videoCards'){

     fileTypes = "mp4,png,jpeg,jpg,gif";

} else if(id == 'videoCardss'){

     fileTypes = "mp4,png,jpeg,jpg,gif";

}

else {

fileTypes = 'jpg,gif,png,jpeg'

}

var _uploader = new plupload.Uploader({

runtimes: 'html5,flash,silverlight,html4',

browse_button: id,

//multi_selection: false,

 

flash_swf_url: 'lib/plupload-2.1.2/js/Moxie.swf',

silverlight_xap_url: 'lib/plupload-2.1.2/js/Moxie.xap',

url: 'http://oss.aliyuncs.com',

 

filters: {

mime_types: [ //只允许上传图片和zip,rar文件

{ title: "Image files", extensions: fileTypes }

],

max_file_size: '10mb', //最大只能上传10mb的文件

prevent_duplicates: true //不允许选取重复文件

},

 

init: {

PostInit: function () {

document.getElementById('ossfile').innerHTML = '';

document.getElementById(sure).onclick = function () {

set_upload_param(_uploader, '', false);

return false;

};

},

 

FilesAdded: function (up, files) {

var listimage = '';

let reader = new FileReader(); //本地预览

var images = new Blob([up.files[0]]);

reader.onload = function (event) {

listimage = event.target.result;

};

reader.readAsDataURL(images);

//商品展示数量判断（实物卡券）

 

if (id == "cardzmbtn") {

if (up.files.length > 1) { // 最多上传1个文件

alert('只能上传1张图片');

return;

}

}

//商品展示数量判断（虚拟卡券）

 

if (id == "cardzmbtns") {

if (up.files.length > 1) { // 最多上传1个文件

alert('只能上传1张图片');

return;

}

}

setTimeout(function(){

if (imgContent == "detailOssfile") {

plupload.each(files, function (file) {

//data:img base64 编码数据显示

document.getElementById(imgContent).innerHTML += '

' + file.name + '
'

+ '

'

+ '

'

+ ''

+ '

';

});

} else if (imgContent == "ossfile") {

plupload.each(files, function (file) {

console.log('file');

console.log(file);

document.getElementById(imgContent).innerHTML += '

' + file.name + '
'

+ '

'

+ '

'

+ ''

+ '

';

});

}else if (imgContent == "videoOssfiles") {

plupload.each(files, function (file) {

console.log('file');

console.log(file);

document.getElementById(imgContent).innerHTML += '

' + file.name + '
'

+ '

'

+ '

'

+ ''

+ '

';

});

}

else {

plupload.each(files, function (file) {

document.getElementById(imgContent).innerHTML += '

' + file.name + '
'

+ '

'

+ '

'

+ ''

+ '

';

});

}

},500)

 

},

 

BeforeUpload: function (up, file) {

check_object_radio();

set_upload_param(up, file.name, true);

},

 

UploadProgress: function (up, file) {//进度条

var d = document.getElementById(file.id);

var prog = d.getElementsByTagName('div')[0];

var progBar = prog.getElementsByTagName('div')[0]

// progBar.style.width= 2*file.percent+'px';

progBar.innerHTML = "上传进度：" + file.percent + "%";

},

 

FileUploaded: function (up, file, info) {

if (info.status == 200) {

// document.getElementById(file.id).parentNode.getElementsByTagName('b')[0].innerHTML = 'ossUrl:' + get_uploaded_object_name(file.name);

document.getElementById(file.id).parentNode.getElementsByTagName('b')[0].setAttribute('details', get_uploaded_object_name(file.name));

}

else {

document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;

}

},

 

Error: function (up, err) {

if (err.code == -600) {

document.getElementById(tips).appendChild(document.createTextNode("\n选择的文件太大了,可以根据应用情况，在upload.js 设置一下上传的最大大小"));

}

else if (err.code == -601) {

document.getElementById(tips).appendChild(document.createTextNode("\n选择的文件后缀不对,可以根据应用情况，在upload.js进行设置可允许的上传文件类型"));

}

else if (err.code == -602) {

document.getElementById(tips).appendChild(document.createTextNode("\n这个文件已经上传过一遍了"));

}

else {

document.getElementById(tips).appendChild(document.createTextNode("\nError xml:" +"您上传的图片在传输过程中受损，请刷新并重新选择您要上传的图片"));

// document.getElementById(file.id).parentNode.getElementsByTagName('b')[0].innerHTML = "\nError xml:" +"您上传的图片在传输过程中受损，请刷新并重新选择您要上传的图片";

 

return false;

}

}

}

});

 

_uploader.init();

}

 

export {

uploader,

get_uploaded_object_name,

getSelectImageName

};

友情提示：这篇仅供我自己日后不时之需，所以潦草不细致，里面有很多没用的东西，有时间我会回来修改