![1e1b09402ce18f4ef88f9aae8e71a098.png](https://i-blog.csdnimg.cn/blog_migrate/1a58799d9312df3de7ccee422641a7d6.jpeg)
【摘要】本文主要是对图片上传做一下汇总以及注意事项(以公司项目为例)。本文描述的是在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"></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"></i>
</div>
</div>
</div>
这里需要注意:
<input type="file" name="goods_main_image_file(别名:当前页面的js文件会用到)" class="ms-upload-file" _width="228" _height="150" value="{{goods_main_image_file(别名:当前页面的js文件会用到)}}" upload="{{id_public_goods_info(单条数据的ID)}}" level="1" error="请选择图片!"/>
<input type="hidden" name="goods_main_image(数据库字段)" value="{{goods_main_image(数据库字段)}}" warp="goods_main_image_file(别名:当前页面的js文件会用到)"/>
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);
特别注意:
![a32bbdaac096d72b25958dc8d4f2b080.png](https://i-blog.csdnimg.cn/blog_migrate/989afa29b1ee419505fd2f6974442d59.jpeg)
如果还不可以,那就去config.js文件里面看一下这个位置有没有这些
![8158ef8c81e29388905f8acda639820e.png](https://i-blog.csdnimg.cn/blog_migrate/2f589983c7f83a0d1be3705ff5452c2d.jpeg)
仍然不可以的话,去对应的路径找一下这些文件看有没有
附:这种方法也可以上传视频
常见错误:
- 传入了后端不必要的文件路径内容: C:file_image1.jpg的内容
- Json没有用引号扩起来,导致后端报错
欢迎关注 技术团队的知乎账号 我们凭团队实例运作以下专栏, 必须干货!
互联网创业专栏 (我们小伙伴的创业历程)
与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)
互联网产品研发管理 (我们公司对产品结构的管理思路)
产品君的案例库(产品小伙伴深刻总结)