【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑

矫情吗；* 2021-06-26 16:06 238阅读 0赞

项目中需要用到多图片上传功能，于是在百度搜了一下，首先使用了`kissy uploader`,是由阿里前端工程师们发起创建的一个开源 JS 框架中的一个上传组件。。。但，后面问题出现了。

在对添加的信息进行重新编辑的时候，这些图片怎么办？由于对js不是很熟悉，就没有想去修改这个组件的代码。只有重新寻找合适的组件，于是就找到了百度的`WebUploader`,下面简要描述一下该组件在`MVC`中的使用，包括图片的上传和预览，以及在编辑界面对图片的处理办法。

先来一张效果图：  
![在这里插入图片描述][20190817233053388.png]

## （一）图片的上传和预览 ##

（1）下载WebUploader

（2）将下载的文件添加到你的项目中，一般这几个就够了

（3）**在视图上放一个放图片的容器，以及一个选择图片文件的按钮**

(4)然后就是用`js`来初始化`WebUploader`,这段代码主要也是借鉴了网上的一个`Demo`,找不到出处了，在此表示感谢。

这段js代码是用在上传图片界面，主要思路如下：

1）设置图片为自动上传：`auto: true`,

2）每次返回的`json`对象保存起来，代码如下：

//保存从后台返回的图片url
                    var PhotoUrlArray = new Array();
                    function PhotoUrl(id, filePath) { 
                        this.id = id;
                        this.filePath = filePath;
                    }
    ......
    // 文件上传成功执行方法
                    uploader.on('uploadSuccess', function (file, response) { 
                        $('#' + file.id).addClass('upload-state-done');
                         //将上传的url保存到数组
                        PhotoUrlArray.push(new PhotoUrl(response.id, response.filePath));
                        });

3）这里需要注意的是，当用户上传图片后，有可能会进行删除图片操作，所以需要在该事件里面，将`json`对象数组里面相对应的元素进行删除操作：

//执行删除方法
                        $list.on("click", ".cp_img_jian", function ()
                        { 
    
                            var Id = $(this).parent().attr("id");
                            //删除该图片
                                uploader.removeFile(uploader.getFile(Id, true));
                                for (var i = 0; i < PhotoUrlArray.length; i++) { 
                                    if (PhotoUrlArray[i].id == Id) { 
                                        PhotoUrlArray.remove(i);
                                    }
                            }
                            $(this).parent().remove();
                        });

（5）视图的代码就差不多了，现在在`Controller`里新建一个`Action`用于保存图片并返回图片路径，由于该组件是一个文件一个文件的上传到服务端，所以，在用户没有点击保存的情况下，上传的图片只能保存到临时文件夹里面，当用户保存全部信息的时候，将保存到临时文件夹的文件移动到正式文件夹，并保存相对应的图片`url`到数据库。

public ActionResult UpLoadProcess(string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase file)
            { 
                //保存到临时文件夹
                string urlPath = "../Upload/temp";
                string filePathName = string.Empty;
    
                string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "Upload/temp");
                if (Request.Files.Count == 0)
                { 
                    return Json(new {  jsonrpc = 2.0, error = new {  code = 102, message = "保存失败" }, id = "id" });
                }
    
                string ex = Path.GetExtension(file.FileName);
                filePathName = Guid.NewGuid().ToString("N") + ex;
                if (!System.IO.Directory.Exists(localPath))
                { 
                    System.IO.Directory.CreateDirectory(localPath);
                }
                file.SaveAs(Path.Combine(localPath, filePathName));
    
                return Json(new
                { 
                    jsonrpc = "2.0",
                    id = id,
                    filePath = urlPath + "/" + filePathName//返回一个视图界面可直接使用的url
                });
    
            }

## （二）编辑视图界面图片的处理 ##

（1）主要思路：在对信息进行编辑的时候，也需要使用该控件来上传图片，所以为了保持和上传图片预览格式一致，需要在初始化的时候，将后台传回的图片显示在图片容器里面。

<div id="fileList">
                    @foreach (var item in @ViewBag.picList)
                           {
                            <div id=@item.picId class="cp_img">
                            <img src="@item.picUrl" />
                             <div class="cp_img_jian"></div>
                  </div>
              }
           </div>

除了这里初始化预览图片外，还需要在获取图片`url`的方法上进行改造，这里就是关键。在视图里，有一个实体属性`PhotoUrl`用来保存所有的`url`图片。

这个方法在上传视图中也是用来保存图片`urls`的，大同小异，稍微修改一下就行。

（2）后端上传服务都是使用的一个`Action`,没有不同的地方，主要的区别是在保存的时候对图片`url`的处理上，每个系统都不一样，这里就不叙述了。

**总结：项目做了几个了，可技术总没有提升上去，得突破自己才行！从现在开始，记录每一个在项目中值得记录的东西。**

补充一下！！！

最近有很多人加我，想要这个源码，我在这里提供百度云盘链接，需要的请自己下载！谢谢。。。  
链接：http://pan.baidu.com/s/1jHXziZ0 密码：q919

[20190817233053388.png]: /images/20210626/ec084fff84ae468ea9c3cc8b4692c1f6.png