项目需求:
项目一开始使用第三方cdn,七牛服务器上传图片,但是因为项目设计到很多身份证,营业执照等照片的上传,怕上传到这些cdn上面,消息泄露,所以将上传到第三方,改为上传到本地,七牛上传在之前的文章中有提到过,这里就不细说了,那么,接下了,我给大家讲一下laravel上传图片到本地的代码实现吧。
首先你需要了解plupload.js的相关知识:
define(['jquery', 'plupload', 'utils', 'locale'], function ($, plupload, utils, Locale) {
var sdk = {};
var defaultSetting = {
multi_selection: false,
file_data_name: 'image',
flash_swf_url: '/static/libs/plupload/Moxie.swf',
auto_start: true,
url: '/service/cdn/upload',
headers: {
'X-XSRF-TOKEN': $.cookie('XSRF-TOKEN')
}
};
sdk.uploader = function (settings) {
var options = {};
plupload.extend(options, defaultSetting, settings);
var backupFileUploadedHandler = options.init && options.init.FileUploaded;
if (backupFileUploadedHandler) {
options.init.FileUploaded = function () {};
}
var uploadedErrorHandler = options.init && options.init.Error;
if (uploadedErrorHandler) {
options.init.Error = function () {};
}
var uploader = new plupload.Uploader(options);
// bind 'FilesAdded' event
uploader.bind('FilesAdded', function (up, files) {
var autoStart = up.getOption && up.getOption('auto_start');
autoStart = autoStart || (up.settings && up.settings.auto_start);
if (autoStart) {
setTimeout(function (){
up.start();
}, 0);
}
// Reposition Flash/Silverlight
up.refresh();
});
// bind 'FileUploaded' event
uploader.bind('FileUploaded', (function (fileUploadedHandler) {
return function (up, file, info) {
var response = $.parseJSON(info.response);
if (response.status == 'SUCCESS') {
if (fileUploadedHandler) {
fileUploadedHandler(up, file, response.body);
}
} else {
utils.showMessage(Locale.t('errors.upload_image_failed'));
}
};
})(backupFileUploadedHandler));
uploader.bind('Error', (function(uploadedErrorHandler) {
return function(up, err) {
var errTip = '';
var file = err.file;
if (file) {
switch (err.code) {
case plupload.FAILED:
errTip = Locale.t('errors.upload_image_failed');
break;
case plupload.FILE_SIZE_ERROR:
var max_file_size = up.getOption && up.getOption('max_file_size');
max_file_size = max_file_size || (up.settings && up.settings.max_file_size);
errTip = Locale.t('errors.img_size_error', {size: max_file_size});
break;
case plupload.FILE_EXTENSION_ERROR:
errTip = Locale.t('errors.img_type_error');
break;
default:
errTip = Locale.t('errors.upload_image_failed');
break;
}
}
uploadedErrorHandler(up, err, errTip);
};
})(uploadedErrorHandler));
uploader.init();
return uploader;
};
return sdk;
});
该js复写了plupload.js,在qiniu上传的js基础上进行的修改,
在自定义的js文件中使用uploader.js,
var providerLicenseUpload = Uploader.uploader({
runtimes: 'html5,flash,html4',
browse_button: 'provider-license-upload',
max_file_size: '1mb',
dragdrop: false,
auto_start: true,
filters: {
mime_types: [
{
title : 'Image files',
extensions : 'jpg,jpeg,gif,png'
}
]
},