图片上传

最新推荐文章于 2023-11-03 18:00:55 发布
最新推荐文章于 2023-11-03 18:00:55 发布
阅读量318 收藏 1
点赞数
分类专栏： vue 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ls_ange/article/details/83410336
版权

图片上传

1. 服务器端(Django)

  1. 存储图片到本地服务器

     #导入配置文件
 import django_jobapp.settings as settings
 
 def upload(request):
     if request.method == 'POST':
         try:
         #此处可以接收文件和字符串
             f1 = request.FILES['usericon']
             usrid=request.POST.get('userid')
         #设置保存的文件名
             fname = '%s/pic/%s' % (settings.STATICFILES_DIRS[0], f1.name)
         #由于文件是二进制流的方式，所有要用chunks()
             with open(fname, 'wb') as pic:
                 for c in f1.chunks():
                     pic.write(c)
             return JsonResponse({"code": "808"})
         except Exception as ex:
             print(ex)
             return JsonResponse({"code": "408"})
     else:
         return JsonResponse({"code": "408"})

  2. 利用uuid生成唯一文件名

     import uuid
 
 fname = '%s/pic/%s' % (settings.STATICFILES_DIRS[0], str(uuid.uuid4())+'.'+f1.name.split('.')[1])

2. 客户端

  1. 利用表单上传

     <form action="http://127.0.0.1:8000/user/upload/" method="post" enctype="multipart/form-data">
     <input type="text" value="user001" name="userid">
     <input type="file" name="usericon">
     <input type="submit">
 </form>

  2. 利用Ajax上传图片

      $('#btn-submit').click(function () {
    var formData = new FormData($( "#myform" )[0]);
    $.ajax({
        url: 'http://127.0.0.1:8000/user/upload/' ,
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (returndata) {
            console.log(returndata);
        },
        error: function (returndata) {
            console.log(returndata);
        }
    });
})

  3. 图片预览+Ajax上传完整代码

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>上传文件</title>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
     <style>
         .icon{
             width: 200px;
             height: 200px;
         }
         #upload_file{
             display: block;
             width: 200px;
             height: 200px;
             position: relative;
             z-index: 1;
             opacity: 0;
         }
         #preview{
             width: 200px;
             height: 200px;
             background: grey;
             background: url("add.png");
             background-repeat: no-repeat;
             background-position: center;
             position: relative;
             border: solid 1px rgba(128, 128, 128, 0.4);
             top: -200px;
             z-index: 0;
         }
         #preview img{
             width: 100%;
             height: 100%;
             object-fit: cover;
             /*object-position: center 100px;*/
         }
     </style>
 </head>
 <body>
 <form id="myform">
     <input type="text" value="user001" name="userid">
     <div class="icon">
         <input type="file" name="usericon" id="upload_file">
         <div id="preview"></div>
     </div>
 
     </div>
     <input type="button" value="提交" id="btn-submit">
 </form>
 
 <script>
 
     $('#upload_file').change(function (e) {
         var file = e.target.files[0];
         preview1(file);
     })
     function preview1(file) {
         var img = new Image();
         img.src = URL.createObjectURL(file);
         var url = img.src;
         var $img = $(img);
         img.onload = function () {
             URL.revokeObjectURL(url);
             $('#preview').empty().append($img);
         }
     }
    $('#btn-submit').click(function () {
        var formData = new FormData($( "#myform" )[0]);
        $.ajax({
            url: 'http://127.0.0.1:8000/user/upload/' ,
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (returndata) {
                console.log(returndata);
            },
            error: function (returndata) {
                console.log(returndata);
            }
        });
    })
 </script>
 </body>
 </html>

3. Vue.JS实现图片上传

	<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
	
	import axios from 'axios'
	// 添加请求头
	update (e) {  // 上传照片
	   var self = this
	   let file = e.target.files[0]
	   /* eslint-disable no-undef */
	   let param = new FormData() // 创建form对象
	   //usericon通常就是file的name属性值
	   param.append('usericon', file, file.name) // 通过append向form对象添加数据
	   param.append('chunk', '0') // 添加form表单中其他数据
	   console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
	   let config = {
	    headers: {'Content-Type': 'multipart/form-data'}
	   }
	   // 添加请求头
	  axios.post('http://127.0.0.1:8000/user/upload/', param, config)
	    .then(response => {
	     if (response.data.code === 0) {
	      self.ImgUrl = response.data.data
	     }
	     console.log(response.data)
	    })
	  }

4. 七牛云存储

  1. 云存储模型

    https://developer.qiniu.com/kodo/manual/1205/programming-model

  2. 安装

     pip install qiniu

  3. 通过服务器端上传到七牛（方式一）

    思路是，先把前端上传的文件存在本地服务器，然后再上传到七牛云服务器

     	from qiniu import Auth, put_file, etag
 	import qiniu.config
 	def qiniuupload(request):
 	    if request.method == 'POST':
 	        try:
 	            # 需要填写你的 Access Key 和 Secret Key
 	            access_key = 'M1HuucZkH6llwMhDYI9n7um4bymn6IzmZxu-jgfw'
 	            secret_key = 'Hev51XD6vqBQ_WhxSuyMjNjpnbiFP0QXGQ0YUhLH'
 	            # 构建鉴权对象
 	            q = Auth(access_key, secret_key)
 	            # 要上传的空间
 	            bucket_name = 'jobapp'
 	            f1 = request.FILES['usericon']
 	            # usrid=request.POST.get('userid')
 	            # 上传到七牛后保存的文件名
 	            key = '%s/pic/%s' % (settings.MEDIA_ROOT, str(uuid.uuid4())+'.'+f1.name.split('.')[1])
 	
 	            # key = str(uuid.uuid4())+'.'+f1.name.split('.')[1]
 	            # 生成上传 Token，可以指定过期时间等
 	            token = q.upload_token(bucket_name, key, 3600)
 	            #保存文件到服务器
 	            with open(key, 'wb') as pic:
 	                for c in f1.chunks():
 	                    pic.write(c)
 	            # 要上传文件的本地路径
 	            localfile = key
 	            ret, info = put_file(token, key, localfile)
 	            print('七牛云存储')
 	            print(info)
 	            assert ret['key'] == key
 	            assert ret['hash'] == etag(localfile)
 	
 	            #此处要写加入数据库代码
 	            domain='http://pgmso4nw8.bkt.clouddn.com/'
 	            return JsonResponse({"code": "908","url":domain+key})
 	        except Exception as ex:
 	            print('error-------------------------')
 	            print(ex)
 	            return JsonResponse({"code": "408"})
 	    else:
 	        return JsonResponse({"code": "408"})

  4. 通过服务器端上传到七牛（方式二）

    思路，客户端先请求业务服务器拿到token，然后客户端直接上传的七牛云

    客户端代码

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>上传文件-七牛</title>
 
     <style>
         .icon {
             width: 200px;
             height: 200px;
         }
 
         #upload_file {
             display: block;
             width: 200px;
             height: 200px;
             position: relative;
             z-index: 1;
             opacity: 0;
         }
 
         #preview {
             width: 200px;
             height: 200px;
             background: grey;
             background: url("文件上传/add.png");
             background-repeat: no-repeat;
             background-position: center;
             position: relative;
             border: solid 1px rgba(128, 128, 128, 0.4);
             top: -200px;
             z-index: 0;
         }
 
         #preview img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             /*object-position: center 100px;*/
         }
     </style>
 
 
     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
           integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 </head>
 <body>
 
 <div class="container">
 
     <div class="mainContainer">
         <form method="post" enctype="multipart/form-data" id="form" action="upload">
             <div id="box2">
                 <button class="select-button">选择文件</button>
                 <input class="file-input" type="file" id="select2" />
             </div>
         </form>
 
     </div>
 </div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 <script src="js/qiniu.min.js"></script>
 
 <script>
 
     $("#select2").unbind("change").bind("change",function(){
         var file = this.files[0];
         var finishedAttr = [];
         var compareChunks = [];
         var observable;
         if (file) {
             $.ajax({
                 url: "http://127.0.0.1:8000/user/qiniutoken/?key="+file.name, success: function (res) {
                     var token = res.uptoken;
                     var domain = res.domain;
                     var newname=res.key
                     var newfile = new File([file], newname);
                     alert(newfile.name);
                     var config = {
                         useCdnDomain: false,
                         disableStatisticsReport: true,
                         retryCount: 6,
                         region: qiniu.region.z0
                     };
                     var putExtra = {
                         fname: "",
                         params: {},
                         mimeType: ["image/png", "image/jpeg", "image/gif"]
                     };
                     var key = newfile.name;
                     // 添加上传dom面板
                     putExtra.params["x:name"] = key.split(".")[0];
                     var subscription;
                     // 调用sdk上传接口获得相应的observable，控制上传和暂停
                     observable = qiniu.upload(file, key, token, putExtra);
 
                     subscription = observable.subscribe({
                         next(res){
                             // ...
                         },
                         error(err){
                             alert('error！')
                         },
                         complete(res){
                             alert('上传成功！')
                             console.log(res)
                         }
                     });
 
                 }
             })  //end ajax
 
 
 
         }
     })
 
 </script>
 </body>

    服务器端代码

     def qiniutoken(request):
     if request.method == 'GET':
         try:
             # 需要填写你的 Access Key 和 Secret Key
             access_key = 'M1HuucZkH6llwMhDYI9n7um4bymn6IzmZxu-jgfw'
             secret_key = 'Hev51XD6vqBQ_WhxSuyMjNjpnbiFP0QXGQ0YUhLH'
             filename=request.GET.get('key')
             print(filename)
             # 构建鉴权对象
             q = Auth(access_key, secret_key)
             # 要上传的空间
             bucket_name = 'jobapp'
             key = str(uuid.uuid4())+'.'+filename.split('.')[1]
             # 生成上传 Token，可以指定过期时间等
             token = q.upload_token(bucket_name,key, 3600)
             #此处要写加入数据库代码
             domain='http://pgmso4nw8.bkt.clouddn.com/'
             return JsonResponse({"uptoken": token,"domain":domain,"key":key})
         except Exception as ex:
             print('error-------------------------')
             print(ex)
             return JsonResponse({"code": "408"})
     else:
         return JsonResponse({"code": "408"})
ls_ange
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Go图片上传
siriusのCSDN博客
06-24 4687
使用Go语言实现图片上传功能，服务器及客户端的源代码。 服务器端代码： // uploadfile_server.go package main import ( //"crypto/md5" "fmt" // "html/template" "io" "log" "net/http" "os" // "strconv" //"time" ) //检查目录是否存在 f
使用 jquery-file-upload 插件实现图片上传功能
@必意玲
02-16 8696
获取了文件框的元素 调用fileupload函数即可 只要引入了插件 jquery对象上都会有这个函数就可以调用。这里我用的 files.pic1 接收，所以客户端必须根据 pic1 传参数到服务端。jQuery File Upload 需要引入的包。
怎么上传上传图片
weixin_35756373的博客
01-02 4131
上传图片的方法可能会因为使用的软件或网站的不同而有所差异，但通常来说，都可以按照以下步骤来上传图片： 打开你要使用的软件或网站，例如图床、社交媒体平台、在线文档编辑器等。 查找并点击上传图片的按钮，通常情况下会有一个“浏览”或“选择文件”的按钮。 在弹出的对话框中，找到你要上传的图片文件，并选择它。 点击“打开”或“选择”按钮，开始上传图片。 等待上传完成，完成后通常会有一个确认信息或预...
vue 上传照片插件
weixin_45525177的博客
11-03 474
参考文章：http://blog.ncmem.com/wordpress/2023/11/03/vue-%e4%b8%8a%e4%bc%a0%e7%85%a7%e7%89%87%e6%8f%92%e4%bb%b6/总的来说，Vue上传照片插件提供了一种简单、便捷的方式来上传图片，并无需编写大量冗长的代码。上传照片插件能够快速地将照片上传到服务器，支持多图上传、拍照上传和拖拽上传等功能。此外，插件还可以对上传过程进行自定义，如上传时的进度条显示、图片大小限制等。其中，上传照片插件是Vue的常用插件之一。
android选择图片或拍照图片上传到服务器(包括上传参数)
热门推荐
Dream It Possible
03-01 1万+
http://blog.csdn.net/vipa1888/article/details/8213898 最近要搞一个项目，需要上传相册和拍照的图片，不负所望，终于完成了！  不过需要说明一下，其实网上很多教程拍照的图片，都是缩略图不是很清晰，所以需要在调用照相机的时候，事先生成一个地址，用于标识拍照的图片URI 具体上传代码： 1.选择图片和上传界面，包括上传完成
jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档
Python代码大全
12-14 1689
服务端处理没有特殊的限制，只要服务端接受file表单提交的数据处理后返回json格式数据，上传成功返回的json数据里必须含有code和src，其中code必须为200，src是上传后的图片url，上传失败返回的json数据里必须含有code和msg，其中code为错误码(不能是200)，msg为错误信息。jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档。以./upload1.php为例。程序包内含使用Demo。
weui图片上传
09-27
web图片上传前台页面 weui
图片上传插件
08-14
在IT领域，图片上传插件是一种常见的用户界面组件，它允许用户通过JavaScript（js）交互在网站或应用程序中上传图片。这种插件极大地提升了用户体验，因为它简化了原本复杂的过程，让用户能够轻松地将图片从本地...
多图片上传
11-15
在IT领域，多图片上传是一项常见的功能，尤其在社交媒体、电商平台和内容管理系统中。这个功能让用户能够一次性上传多个图片，极大地提高了用户体验。标题中的“多图片上传”指的是一个JavaScript库或者插件，它使得...
图片上传demo
09-30
在IT行业中，图片上传是一项常见的功能，特别是在网页和应用程序开发中。这个“图片上传demo”很可能是为了展示或教学如何实现这一功能而准备的。图片上传涉及到的技术和流程包括前端的用户界面设计、文件选择与预览...
动易内容管理系统Word图片上传
06-23
在“动易内容管理系统Word图片上传”功能中，系统允许用户直接从Microsoft Word文档中选择并上传图片到网站，极大地提升了编辑效率和用户体验。 该功能的核心在于实现了Word与网站之间的无缝集成。用户可以在Word...
阿里云OSS实现图片上传功能
qq_52416556的博客
07-21 2822
在配置文件中添加相关配置config（名字自定义）alioss:bucket-name: yourname(自定义)spring:profiles:active: dev #设置环境config(名字自定义):alioss:/*** 通用接口*/@Api(tags = "通用接口")@Slf4j@Autowired/*** 文件上传* @return*/@ApiOperation("文件上传")log.info("文件上传：{}",file);try {
图片和视频的上传（文件上传通用）
分享互联网的有趣知识~
06-30 1415
element配合图片视频上传（文件上传通用），文件上传切片以及断点续传的思路。
django-高级
dianxin1203的博客
10-16 158
5.高级 静态文件处理 中间件 上传图片 Admin站点 分页 使用jquery完成ajax 5.1.静态文件处理 管理静态文件 项目中的CSS、图片、js都是静态文件 配置静态文件 在settings 文件中定义静态内容 STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_...
python中typeerror是啥意思-解决Python 写文件报错TypeError的问题
weixin_39569112的博客
11-11 5083
处理上传的文件：f1 = request.FILES["pic"]fname = "%s/%s" % (settings.MEDIA_ROOT, f1.name)with open(fname, "w") as pic:for c in f1.chunks():pic.write(c)测试报错：TypeError at /upload/w...
利用Selenium实现图片文件上传的两种方式介绍
2301_76643199的博客
10-26 840
目前，一般实现文件图片上传的方式都是有一个按钮，点击之后直接调用操作系统自身的弹框，选择文件后，实现上传。作为一位过来人也是希望大家少走一些弯路，如果你不想再体验一次学习时找不到资料，没人解答问题，坚持几天便放弃的感受的话，在这里我给大家分享一些自动化测试的学习资源，希望能给你前进的路上带来帮助。我们就是利用控件的这些信息，定位控件，编写脚本。我们可以直接利用Selenium提供的方法实现文件上传，但是因为依赖开发的实现，而且目前实现基本都会利用框架，所以这种实现方式有很大的局限性。
图片上传的两种方式
斜阳雨陌
10-20 6283
总的说图片上传有两种方式，一种是把图片文件写到数据库中，另一种是存到服务器文件目录中。写到数据库中的图片文件需要转换成二进制流的格式，占用数据库空间比较多，适合少量图片的存储，比如说，系统中某些小图标，写到数据库中的优点是比较安全，不容易被用户不小心删除。   如果是大量的图片的存储通常的做法是保存到服务器的某个文件夹中。而完成上传有很多方式，可以采用流的方式，可以采用ftp的方式，这里采用
[高分项目]基于vue，springboot的图书馆管理系统[源码+笔记+操作手册+说明文档].zip
最新发布
07-25
【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。【项目资源
Android图片上传代码示例
在Android开发中，拍照上传功能是常见的应用场景，通常包括启动相机拍照、获取拍摄的图片、处理图片（如压缩、裁剪）以及将图片上传到服务器等步骤。下面我们将详细解析这个过程中的关键知识点。 1. **Android ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值