上传图片oss_基于阿里OSS图片上传总结

最新推荐文章于 2024-05-27 17:14:33 发布

差多了

最新推荐文章于 2024-05-27 17:14:33 发布

阅读量596

点赞数

文章标签：上传图片oss

本文链接：https://blog.csdn.net/weixin_33438009/article/details/112593004

版权

本文总结了基于阿里OSS的图片与视频上传步骤，包括后台管理系统和手机端的实现方法，强调了上传过程中需要注意的细节，如文件引入、表单元素设置、JS处理以及可能出现的错误和解决方案。

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

【摘要】本文主要是对图片上传做一下汇总以及注意事项（以公司项目为例）。本文描述的是在OSS为基础的前提下，对图片上传问题的总结，随着技术细分的明显，图文服务器、数据库服务器、应用服务器三者分离是最基础要求，因此我们这里做一个小总结。

【作者】小明

1、后台管理系统的上传方法

1）首先需要在当前页面引入以下文件

<script type="text/javascript" src="res/js/common/ui/jquery.form.js"></script>
<script type="text/javascript" src="res/js/core/crypto.js"></script>
<script type="text/javascript" src="res/js/core/hmac.js"></script>
<script type="text/javascript" src="res/js/core/sha1.js"></script>
<script type="text/javascript" src="res/js/core/base64.js"></script>

2）在弹窗文件内的form里面使用

<div class="ms-item-box left">
    <label class="ms-item-label">上传图片<i>(要求：150*150)</i></label>
    <div class="ms-item-text">
        <div class="ms-item-upload">
            <div class="ms-upload-box">
                <span class="ms-upload-text"><i class="iconfont">&#xe600;</i>选择图片</span>
                <div class="ms-upload-alpha"></div>
                <span class="ms-upload-button">更换图片</span>
                <input type="file" name="goods_main_image_file" class="ms-upload-file" _width="228" _height="150" value="{{goods_main_image_file}}" upload="{{id_public_goods_info}}" level="1" error="请选择图片！"/>
                <input type="hidden" name="goods_main_image" value="{{goods_main_image}}" warp="goods_main_image_file"/>
            </div>
            <span class="iconfont ms-upload-close"></span>
            <i class="iconfont mt-loading-icon mt-rotate-load ms-upload-loading">&#xe62f;</i>
        </div>
    </div>
</div>

这里需要注意：

3）在当前页面对应的js文件 submitDialog 里边需要添加：

self.data.goods_main_image_file = 0

goods_main_image_file与上边出现的相对应

4）在当前页面对应的js文件 dialogCallback 里边需要添加：

this.tool.setImage(M(self.input.goods_main_image).prev()[0],self.data.goods_main_image,self.content);

goods_main_image数据库字段

上传视频的方法：

1）在当前页面对应的js文件 dialogCallback 里边需要添加：

var video = document.getElementById('video-change');
if(video){
	M('.ms-upload-video').bind('change', {context:that}, that.uploadVideo1);
	if(self.data.mid_table_remark_014 !== ''){
		M('#video-change').parent().parent().parent().addClass('complete');
		that.deleteVideo();
		M('#video-change').text('更换视频');
		console.log(self.data.mid_table_remark_014);
		M('.goods_main_image_box')[0].href=self.data.mid_table_remark_014
	}
}

mid_table_remark_014：视频地址

goods_main_image_box：点击查看的链接

2）在dialogCallback同级下加入以下代码

uploadVideo1:function(e) {
	var that = e.data.context;
	that.uploadIng=true
	var target = this;
	var box = M(target).parent().parent();
	that.name = target.files[0].name;
	if(!target.files.length){
		return;
	};
	box.removeClass('complete').addClass('load');
	that.videoProgress1(target,box);
	M('.ms-upload-video').unbind('click');
},
deleteVideo:function() {
	M('.ms-upload-close.video').bind('click',function(){
		M.ui.confirm.init({
			title:'系统提示',
			html:'确定要删除吗？',
			position:'absolute',
			button:[
				{
					html:'确认',
					callback:function(){
						M('.ms-item-upload.video').removeClass('complete');
						M('.ms-upload-video').next().val('');
						$('#video-change').text('上传视频');
					}
				}
			]
		});	
	});
},
videoProgress1:function(target,box){
	var that = this;
	M.ui.upload.init({
		element:target,
		context:this,
		that:this.tool,
		type:'vnd',
		callback:function(url,ops){
			M.ui.waiting.creat({
				status:true,
				text:'上传成功',
				time:1000,
				callback:function(self){
					var el=M(ops.element).next()[0];
					el.value=url;
					//$('#video-change').text('上传成功');
					M(target).parent().find('ms-upload-text').find('span').text('上传成功');
					box.addClass('complete').removeClass('load');
					box.find('.ms-upload-text').find('span').html('点击更换')
					that.deleteVideo();
					//M(target).siblings('input').val()
					//M('input[name=goods_main_image_child_0]').val()
					box.parents('.ms-item-box').find('a')[0].href =M(target).siblings('input').val()
					that.uploadIng=false
					//box.siblings('a')[0].href =M(target).siblings('input').val()
					//M('.goods_main_image_box')[0].href = M('input[name=goods_main_image_child_0]').val()
				}
			})
		},
		progress:function(percent) {
			var circle = M('#circle');
			if(target.getAttribute('data-id')==1){
				circle = M('#circle1');
			}
			circle.attr('stroke-dasharray', percent * 1.88 +' 188.4')
		}
	});	
},

3）需要在上传的位置添加

<div class="ms-item-box left" style="width: 300px">
    <label class="ms-item-label">录播上传</label>
    <div class="ms-item-text">
        <div class="ms-item-upload video left mar-right-20">
            <div class="ms-upload-box">
                <span class="ms-upload-text"><i class="img"></i><span id="video-change">点击上传</span></span>
                <div class="ms-upload-alpha"></div>
                <svg width="140" height="90" class="svg">
                    <circle cx="70" cy="45" r="30" stroke-width="4" stroke="#D1D3D7" fill="none"></circle>
                    <circle cx="70" cy="45" id="circle" r="30" stroke-width="4" stroke="#00A5E0" fill="none" stroke-dasharray="0 189" ></circle>
                </svg>
                <input type="file" name="mid_table_remark_014_0" class="ms-upload-video" _width="228" _height="150" value="{{mid_table_remark_014_0}}" upload="{{id_public_goods_info}}"  data-id='2'/>
                <input type="hidden" name="mid_table_remark_014" value="{{mid_table_remark_014}}" warp="mid_table_remark_014_0" class="hide"/>
            </div>
            <span class="iconfont ms-upload-close video"></span>
        </div>
    </div>
    <div> <a target="_blank" style="cursor: pointer" class="goods_main_image_box">点击查看视频</a></div>
</div>

1、手机端的上传方法

<input type="file" id="weichat_img">

;(function(M){
	M.define('user_edit',{
		node:{},
		data:{
			signature:{expire:0}
		},
		init:function(options){
			this.creat();
		},		
		creat:function() {
			this.node.upload = M('#weichat_img');
			this.addEvent();
		},
		addEvent:function() {
			this.node.upload.on('change', {context:this}, this.uploadFile);
		},
		uploadFile:function(e) {
			var that = e.data.context;
			var target = this;
			var box = M('.preview-img-wrap');
			var reader = new FileReader();
			if(!target.files.length){
				return;
			};
			reader.readAsDataURL(target.files[0]);
			reader.onload = function() {
				M.ui.upload.init({
					element:target,
					context:this,
					that:that,
					callback:function(url,ops){
						console.log(url)
					}
				});	
			}
		}
	}).ready(function(){
		M.ui.rotate.init(function(){
			M.use.init(['form','crypto','hmac','sha1','base64'],function(){
				M.user_edit.init();
			});
		})
	});
})(window.jQuery||window.Zepto||window.xQuery);

特别注意：

如果还不可以，那就去config.js文件里面看一下这个位置有没有这些

仍然不可以的话，去对应的路径找一下这些文件看有没有

附：这种方法也可以上传视频

常见错误:

传入了后端不必要的文件路径内容: C:file_image1.jpg的内容
Json没有用引号扩起来，导致后端报错

欢迎关注 技术团队的知乎账号我们凭团队实例运作以下专栏，必须干货！

互联网创业专栏 (我们小伙伴的创业历程)

与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)

互联网产品研发管理 (我们公司对产品结构的管理思路)

产品君的案例库（产品小伙伴深刻总结）

差多了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
上传图片oss_基于阿里OSS图片上传总结

【摘要】本文主要是对图片上传做一下汇总以及注意事项（以公司项目为例）。本文描述的是在OSS为基础的前提下，对图片上传问题的总结，随着技术细分的明显，图文服务器、数据库服务器、应用服务器三者分离是最基础要求，因此我们这里做一个小总结。【作者】小明1、后台管理系统的上传方法1）首先需要在当前页面引入以下文件<script type="text/javascript" src="res/js...
复制链接

扫一扫