base64 解决图片移动端上传保存问题

最新推荐文章于 2024-07-15 00:00:26 发布

mengkui1107

最新推荐文章于 2024-07-15 00:00:26 发布

阅读量7.1k

点赞数

分类专栏：前端开发文章标签： base64 js解决移动图片上传

本文链接：https://blog.csdn.net/mengkui1107/article/details/68069816

版权

在开发财经类移动端APP时，遇到iOS图片上传问题。通过base64编码实现曲线救国，创建js上传组件，获取图片base64数据，然后通过POST提交给后台解码保存，最终成功上传图片。

摘要由CSDN通过智能技术生成

base64 解决图片移动端上传保存问题

公司在开发一个财经类的移动端app,需要实现手机客户端更改头像功能,苦于对ios开发一窍不通,通过调用原生代码获取打开相机,调用图库都无法实现.只有通过base64 实现曲线救国.
`//上传图片的js
(function() {
window.LUploader = function(el, params) {
var _self = this;
_self.trigger=el;
_self.params = {
accept: ‘image/*’,
multiple: false,
maxsize: 102400,
imgObj: {},
showsize: false,
quality:0.1,
url: ”
}
for (var param in params) {
_self.params[param] = params[param];
}
_self.init();
};
LUploader.prototype.init = function() {
var _self = this;
_self.trigger.setAttribute(‘accept’, _self.params.accept);
_self.params.multiple && _self.trigger.setAttribute(‘multiple’, ”);

    var btn = document.querySelector('#' + _self.trigger.getAttribute('data-LUploader'));
    btn.addEventListener('click', function() {
        _self.trigger.click();
    });
    _self.trigger.addEventListener('change', function() {
        if (!this.files.length) return;
        var files = Array.prototype.slice.call(this.files);
        files.forEach(function(file, i) {
            if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
            var reader = new FileReader();
            _self.params.imgObj.size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) + "KB";
            var li = document.createElement("li");
            li.innerHTML = '<div class="LUploader-progress"><span></span></div>';
            if (_self.params.showsize) {
                var div_size = document.createElement('div');
                div_size.className = 'LUploader-size';
                div_size.textContent = _self.params.imgObj.size;
                li.appendChild(div_size);
            }
            var LUploaderList = _self.trigger.parentElement.querySelector('.LUploader-list');
            if (!_self.params.multiple) { //鍋囧鏄崟涓笂浼�                    if (_self.old_li) {
                    LUploaderList.removeChild(_self.old_li);
                } else {
                    _self.old_li = li;
                }
            }
            LUploaderList.appendChild(li);
            LUploaderList.parentElement.nextElementSibling.style['display'] = 'none';
            reader.onload = function() {
                var params = dataSet(_self.trigger);
                var url = _self.params.url;
                var result = this.result;
                var img = new Image();
                _self.params.imgObj.src = img.src = result;
                li.style['background-image'] = 'url(' + result + ')';
                if (result.length <= _self.params.maxsize) {
                    img = null;
                    _self.upload(url, params, result, file.type, li);
                    return;