精华内容
参与话题
问答
  • npm install vue-image-crop-upload npm install –save-dev babel-polyfill <template> <div id="app"> <button class="btn" @click="toggleShow">设置头像</button> <my-upload @...
    npm install vue-image-crop-upload
    npm install –save-dev babel-polyfill
    
    <template>
      <div id="app">
        <button class="btn" @click="toggleShow">设置头像</button>
        <my-upload
        @crop-success="cropSuccess"
        @crop-upload-success="cropUploadSuccess"
        @crop-upload-fail="cropUploadFail"
        v-model="show"
        :width="200"
        :height="200"
        img-format="png"
        :size="size"
        langType='zh'
        :noRotate='false'
        field="Avatar1"
        url="https://httpbin.org/post"></my-upload>
        <img :src="imgDataUrl">
      </div>
    </template>
    
    <script>
      import 'babel-polyfill'; // es6 shim
      import myUpload from 'vue-image-crop-upload';
      export default {
        data() {
          return {
            imgDataUrl: "",
            show: false,
            size:2.1
          }
        },
        components: {
          "my-upload": myUpload
        },
        methods: {
            toggleShow() {
                this.show = !this.show;
            },
            cropSuccess(imgDataUrl, field) {
                console.log('-------- crop success --------',imgDataUrl, field);
            },
            //上传成功回调
            cropUploadSuccess(jsonData, field){
                console.log('-------- upload success --------');
                this.imgDataUrl = jsonData.files.Avatar1;
                console.log(jsonData);
                console.log('field: ' + field);
            },
            //上传失败回调
            cropUploadFail(status, field){
                console.log('-------- upload fail --------');
                console.log('上传失败状态'+ status);
                console.log('field: ' + field);
            }
        }
     
      }
    </script>
    

    具体使用可以参考官方文档https://github.com/dai-siki/vue-image-crop-upload

    展开全文
  • jquery.upload.js

    热门讨论 2013-09-18 15:49:53
    1 在页面引入jquery.upload js 2 代码 view source print? 01 // upload_img 为一个按钮, 点击时选择文件上传 02 $("#upload_img").click(function() { 03 // 上传方法 04 $.upload({ 05 // 上传地址 06 url: '...
  • $up=new Upload(); $up->savePath='images/'; $info=$up->upload(); if($info){ $_POST['product_img']=$info['product_img']['savepath'].$info['product_img']['savename']; } $_POST['product_...
  • 需要有前面的操作:开启OSS对象存储服务,创建Bucket以及添加一些必要的设置 后台服务器签名:阿里云OSS文档地址 首先需要有一个能获取签名的地址 第一步、搭建签名服务器 方式一、有外网服务器的情况 ...

    需要有前面的操作:开启OSS对象存储服务,创建Bucket以及添加一些必要的设置

    后台服务器签名:阿里云OSS文档地址
    首先需要有一个能获取签名的地址

    第一步、搭建签名服务器

    方式一、有外网服务器的情况

    下载java端的sdk

    OSS签名程序的sdk下载地址

    下载完后,修改源码中的
    在这里插入图片描述
    如果有修改端口的需求,修改App中的port
    在这里插入图片描述
    将项目打成jar
    找到下面这个jar包
    在这里插入图片描述
    通过java -jar appservermaven-1.0.0.jar将其部署到自己的服务器上

    方式二、集成到自己的springboot项目中

    OSS的文档地址

    第一步、添加maven依赖
    <!-- OSS的SDK依赖 -->
    <dependency>
        <groupId>com.aliyun.oss</groupId>
        <artifactId>aliyun-sdk-oss</artifactId>
        <version>3.10.2</version>
    </dependency>
    <!--fastjson工具-->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.72</version>
    </dependency>
    
    第二步、编写一个Controller
    import com.alibaba.fastjson.JSONObject;
    import com.aliyun.oss.OSSClient;
    import com.aliyun.oss.common.utils.BinaryUtil;
    import com.aliyun.oss.model.MatchMode;
    import com.aliyun.oss.model.PolicyConditions;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RestController;
    import java.io.UnsupportedEncodingException;
    import java.sql.Date;
    import java.text.SimpleDateFormat;
    import java.util.LinkedHashMap;
    import java.util.Map;
    
    @RestController
    public class OssController {
    
        @GetMapping("/asign")
        @CrossOrigin  //开启跨域访问
        public JSONObject policyAsign() {
            String accessId = "";  // 请填写您的 AccessKeyId。
            String accessKey = ""; // 请填写您的 AccessKeySecret。
            String endpoint = "";  // 请填写您的 endpoint。
            String bucket = "";    // 请填写您的 bucketname 。
    
            String host = "http://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
            // callbackUrl为 上传回调服务器的URL,请将下面的IP和Port配置为您自己的真实信息。
            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
            String dir = simpleDateFormat.format(new java.util.Date());// 用户上传文件时指定的前缀。我这里设置日期为前缀
    
            OSSClient client = new OSSClient(endpoint, accessId, accessKey);
    
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);
    
            String postPolicy = client.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = new byte[0];
            try {
                binaryData = postPolicy.getBytes("utf-8");
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            }
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = client.calculatePostSignature(postPolicy);
    
            Map<String, Object> respMap = new LinkedHashMap<String, Object>();
            respMap.put("accessid", accessId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));
            // respMap.put("expire", formatISO8601Date(expiration));
    
            JSONObject jasonCallback = new JSONObject();
    //			jasonCallback.put("callbackUrl", callbackUrl);
            jasonCallback.put("callbackBody",
                    "filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");
            jasonCallback.put("callbackBodyType", "application/x-www-form-urlencoded");
            String base64CallbackBody = BinaryUtil.toBase64String(jasonCallback.toString().getBytes());
            respMap.put("callback", base64CallbackBody);
    
            return new JSONObject(respMap);//将签名数据暴露出去
    
        }
    }
    
    第三步、启动springboot项目,将签名数据暴露出去

    通过controller得到签名后的数据
    签名地址为 服务器地址+端口+访问路径,例如http://localhost:8088/asign

    第二步、axios上传文件到阿里OSS服务器

    引入axios
    官网中文文档地址

    cdn方式引入

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
    <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :http-request="Uploadfile">
        <img v-if="pictureUrl.trim()!=''" :src="pictureUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    

    注意这里的:http-request="Uploadfile"使用的是这个方法上传文件
    其中的img是上传后,判断是否获取到图片的url来显示图片。
    需要有一个保存图片的url变量

    <script type="text/javascript">
        const vm = new Vue({ // 配置对象 options
            // 配置选项(option)
            el: '#app',  // element: 指定用vue来管理页面中的哪个标签区域
            data() {
                return {
                    pictureUrl: ''
                };
            },
            methods: {
                //自己编写的函数用于生成文件名,防止上传的文件重名
                getUUID() {
                    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
                        return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
                    })
                },
    
                Uploadfile(param) {
                    let file = param.file; // 得到文件的内容
                    console.log(file);
                    //填写获取签名的地址
                    const getPolicyApiUrl = 'http://localhost:8088/asign'; //获取oss签名的地址
                    // 获取oss签名
                    axios({
                        method: 'get',
                        url: getPolicyApiUrl,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'Access-Control-Allow-Origin': '*',
                        }
                    }).then((response) => {
                        if (response.status == 200) {
                            let policyData = response.data;
                            console.log(policyData);
                            /**
                             ossUrl 换成自己的Bucket的外网地址,
                             例如 https://human-resource-manage.oss-cn-shenzhen.aliyuncs.com
                             */
                            let ossUrl = '';//填写自己OSS服务器的地址
                            let accessUrl = policyData.dir + '/' + this.getUUID() + file.name;//设置上传的访问路径
                            let sendData = new FormData();// 上传文件的data参数
                            sendData.append('OSSAccessKeyId', policyData.accessid);
                            sendData.append('policy', policyData.policy);
                            sendData.append('Signature', policyData.signature);
                            sendData.append('keys', policyData.dir);
                            sendData.append('key', accessUrl);//上传的文件路径
                            sendData.append('success_action_status', 200); // 指定返回的状态码
                            sendData.append('type', 'image/jpeg');
                            sendData.append('file', file);
                            console.log(sendData);
                            axios.post(ossUrl, sendData).then((res) => {
                                this.pictureUrl = ossUrl + '/' + accessUrl;//获得到的url需要将其存数据库中
                                console.log('上传到阿里云的图片地址:' + ossUrl + '/' + accessUrl)
                            })
                        }
                    })
                },
    
            }
        })
    </script>
    

    完整的html代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用户个人信息管理页面</title>
        <!-- cdn引入ElementUI样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
            }
    
            .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
    
            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }
    
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }
    
            .avatar {
                width: 178px;
                height: 178px;
                display: block;
            }
        </style>
    </head>
    <body>
    <div id="app" style="height: 100%">
        <div>
            <el-upload
                    class="avatar-uploader"
                    :show-file-list="false"
                    :http-request="Uploadfile">
                <img v-if="pictureUrl.trim()!=''" :src="pictureUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>
    </div>
    
    <!--cdn引入ElementUI组件必须先引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- cdn引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--cdn引入axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
    <script type="text/javascript">
        const vm = new Vue({ // 配置对象 options
            // 配置选项(option)
            el: '#app',  // element: 指定用vue来管理页面中的哪个标签区域
            data() {
                return {
                    pictureUrl: ''
                };
            },
            methods: {
                //自己编写的函数用于生成文件名,防止上传的文件重名
                getUUID() {
                    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
                        return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
                    })
                },
    
                Uploadfile(param) {
                    let file = param.file; // 得到文件的内容
                    console.log(file);
                    //填写获取签名的地址
                    const getPolicyApiUrl = 'http://localhost:8088/asign'; //获取oss签名的地址
                    // 获取oss签名
                    axios({
                        method: 'get',
                        url: getPolicyApiUrl,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'Access-Control-Allow-Origin': '*',
                        }
                    }).then((response) => {
                        if (response.status == 200) {
                            let policyData = response.data;
                            console.log(policyData);
                            /**
                             ossUrl 换成自己的Bucket的外网地址,
                             例如 https://human-resource-manage.oss-cn-shenzhen.aliyuncs.com
                             */
                            let ossUrl = 'https://human-resource-manage.oss-cn-shenzhen.aliyuncs.com';//填写自己OSS服务器的地址
                            let accessUrl = policyData.dir + '/' + this.getUUID() + file.name;//设置上传的访问路径
                            let sendData = new FormData();// 上传文件的data参数
                            sendData.append('OSSAccessKeyId', policyData.accessid);
                            sendData.append('policy', policyData.policy);
                            sendData.append('Signature', policyData.signature);
                            sendData.append('keys', policyData.dir);
                            sendData.append('key', accessUrl);//上传的文件路径
                            sendData.append('success_action_status', 200); // 指定返回的状态码
                            sendData.append('type', 'image/jpeg');
                            sendData.append('file', file);
                            console.log(sendData);
                            axios.post(ossUrl, sendData).then((res) => {
                                this.pictureUrl = ossUrl + '/' + accessUrl;//获得到的url需要将其存数据库中
                                console.log('上传到阿里云的图片地址:' + ossUrl + '/' + accessUrl)
                            })
                        }
                    })
                },
    
            }
        })
    </script>
    
    
    </body>
    </html>
    
    

    如下图
    在这里插入图片描述

    展开全文
  • 在页面上选多个input上传 后台只取到一张图片 ...[图片说明](https://img-ask.csdn.net/upload/201509/11/1441943734_96049.png)图片说明](https://img-ask.csdn.net/upload/201509/11/1441943728_55067.png)图片说明]...
  • $upload = new \Think\Upload();// 实例化上传类 $upload->maxSize = 0 ;// 设置附件上传大小 $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型 $upload->rootPath = './Uploads/'; // ...
  • nginx upload module

    2017-04-14 05:24:37
    [图片说明](https://img-ask.csdn.net/upload/201704/14/1492147408_631955.png) 错误日志: ![图片说明](https://img-ask.csdn.net/upload/201704/14/1492148883_409662.png) 创建文件失败,后面的文件 应该怎么...
  • Upload上传图片

    2019-12-05 15:45:10
    实现antd上传图片,Upload 组件可以上传多张图片,多张图片上传成功的效果图: 每次上传onChange 回调函数都会执行一次并且里面接收一个JSON对象,其中 file 对象是本次上传的图片信息,status 值为 done 就表示...

    实现antd上传图片,Upload 组件可以上传多张图片,多张图片上传成功的效果图:

    每次上传 onChange 回调函数都会执行一次并且里面接收一个JSON对象,其中 file 对象是本次上传的图片信息,status 值为 done 就表示这一次上传成功了,fileList 中是一个数组,里面是组件所有上传的信息列表,每次上传的信息都会记录在里面。

    未上传时的效果图:

    上传成功时的效果图:

    代码:

    
    
      render() {
            const uploadData = {
              name: 'file',
              action: '/tform/messageSetting/uploadImage',
              onChange(info) {
            localStorage.setItem('uploadinfo', JSON.stringify(info));
                if (info.file.status !== 'uploading') {
                  console.log(info.file, info.fileList);
                }
                if (info.file.status === 'done') {
                  message.success(`${info.file.name} file uploaded successfully`);
                } else if (info.file.status === 'error') {
                  message.error(`${info.file.name} file upload failed.`);
                }
              },
            };
    
        return (
                  <Form.Item label="上传图片" extra="卡片分享图片(500*400)">
                      <Upload {...uploadData}>
                        <Button>
                          <Icon type="upload" /> 点击上传
                        </Button>
                      </Upload>
                  </Form.Item>
        )
    }

     

    展开全文
  • 我尝试过hdfs和pyhdfs库操作hdfs,不过两种方式都是在操作upload时报错,在网上找不到答案,希望有大神可以指点一下。 搭hdfs的同事告诉我,操作是用9000的端口,不过不知道为什么9000端口报404,操作50070没问题,...
  • # el-upload组件代码: ``` <el-upload class="avatar-uploader" :class="{avatarUploaderMimi:size == 'mini', disabled:fileList.length >= (imageCount?imageCount:1)}" :action="uploadUrl" :...
  • String path = request.getSession().getServletContext().getRealPath("/upload"); System.out.println(path); factory.setRepository(new File(path)); factory.setSizeThreshold(1024 * 1024); ...
  • jquery file upload 组件在chrome中好使 在IE中愣是没反应,前台的请求发送不到后台Controller中 后台SpringMVC 接受请求如下 @RequestMapping(value = "/fileupload", method = RequestMethod.POST) public @...
  • <file-upload ref="upload" extensions="jpg,jpeg,png,docx,doc,pdf" :maximum="3" post-action="/api/upload?classify=study" put-action v-model="files" :multiple="true" @input-file="input...
  • 1、需求是这样的: 上传图片,但是图片有大小限制,如果超出限定大小,给出提示即可。 2、现有问题: ...提示是可以给出的,超出...[图片说明](https://img-ask.csdn.net/upload/201907/17/1563334457_73091.png)
  • [webupload插件js](https://img-ask.csdn.net/upload/201601/26/1453771119_567592.png)![jsp页面代码](https://img-ask.csdn.net/upload/201601/26/1453771146_466093.png)![后台代码]...
  • common upload

    千次阅读 2011-01-05 23:42:00
    Upload.javapackage com.zj.sample; import java.io.File;import java.io.IOException;import java.util.Iterator;import java.util.List; import javax.servlet.ServletException;import javax.servlet....

    示例4
    利用Servlet来实现文件上传。
    Upload.java
    package com.zj.sample;
     
    import java.io.File;
    import java.io.IOException;
    import java.util.Iterator;
    import java.util.List;
     
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
     
    import org.apache.commons.fileupload.FileItem;
    import org.apache.commons.fileupload.disk.DiskFileItemFactory;
    import org.apache.commons.fileupload.servlet.ServletFileUpload;
     
    @SuppressWarnings("serial")
    public class Upload extends HttpServlet {
        private String uploadPath = "D://temp"// 上传文件的目录
        private String tempPath = "d://temp//buffer//"// 临时文件目录
        File tempPathFile;
     
        @SuppressWarnings("unchecked")
        public void doPost(HttpServletRequest request, HttpServletResponse response)
               throws IOException, ServletException {
           try {
               // Create a factory for disk-based file items
               DiskFileItemFactory factory = new DiskFileItemFactory();
     
               // Set factory constraints
               factory.setSizeThreshold(4096); // 设置缓冲区大小,这里是4kb
               factory.setRepository(tempPathFile);// 设置缓冲区目录
     
               // Create a new file upload handler
               ServletFileUpload upload = new ServletFileUpload(factory);
     
               // Set overall request size constraint
               upload.setSizeMax(4194304); // 设置最大文件尺寸,这里是4MB
     
               List<FileItem> items = upload.parseRequest(request);// 得到所有的文件
               Iterator<FileItem> i = items.iterator();
               while (i.hasNext()) {
                  FileItem fi = (FileItem) i.next();
                  String fileName = fi.getName();
                  if (fileName != null) {
                      File fullFile = new File(fi.getName());
                      File savedFile = new File(uploadPath, fullFile.getName());
                      fi.write(savedFile);
                  }
               }
               System.out.print("upload succeed");
           catch (Exception e) {
               // 可以跳转出错页面
               e.printStackTrace();
           }
        }
     
        public void init() throws ServletException {
           File uploadFile = new File(uploadPath);
           if (!uploadFile.exists()) {
               uploadFile.mkdirs();
           }
           File tempPathFile = new File(tempPath);
            if (!tempPathFile.exists()) {
               tempPathFile.mkdirs();
           }
        }
    }
     
    demo4.html
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
        <title>File upload</title>
    </head>
    <body>
    // action="fileupload"对应web.xml<servlet-mapping><url-pattern>的设置.
        <form name="myform" action="fileupload" method="post"
           enctype="multipart/form-data">
           File:<br>
           <input type="file" name="myfile"><br>
           <br>
           <input type="submit" name="submit" value="Commit">
        </form>
    </body>
    </html>
     
    web.xml
    <servlet>
        <servlet-name>Upload</servlet-name>
        <servlet-class>com.zj.sample.Upload</servlet-class>
    </servlet>
     
    <servlet-mapping>
        <servlet-name>Upload</servlet-name>
        <url-pattern>/fileupload</url-pattern>
    </servlet-mapping>
    展开全文
  • asp Upload

    千次阅读 2004-12-12 13:40:00
    http://blog.csdn.net/xiaoyuehen/archive/2004/12/11/213094.aspx
  • PHP upload

    2008-06-12 20:57:00
    1. 将文件上传到根目录的upload目录中保存;2. 文件名只能包含"a-z A-Z 0-9"和 "_";3. 文件名中如果含有非法字符,自动转换为"_";4. 文件如果上传出错给出相应提示1. PHP支持HTML以POST的方法传输文件,但是form...
  • su.upload(); int num=su.save("/file/", SmartUpload.SAVE_VIRTUAL); out.println(num+"个文件上传成功!!! "); %> 已经把组件的包导进去了 *,com.jspsmart.upload.*" pageEncoding="UTF-8"%...
  • 最近在使用Element UI做项目的时候,使用到了Upload 上传组件,因为要实现明确name的文件才可以上传,使用到了before-upload方法,发现 当auto-upload为false的时候,before-upload方法失效 当auto-upload为true的...
  • antd Upload 文件上传

    万次阅读 2018-10-11 16:14:40
    1.antd官网Upload组件: https://ant.design/components/upload-cn/ 2.下图是最近开发的上传文档的效果:   3.文件上传的实现: (1)方法一:antd默认上传。 a:渲染文件上传组件。getPDFURL()方法为...
  • element upload before-upload 不起作用

    千次阅读 2018-12-21 18:03:47
  • 现象: [oracle@hotel02 trace]$ cd /u01/app/agent11g/bin [oracle@hotel02 bin]$ ./emctl status agent Oracle Enterprise Manager 11g Release 1 Grid Control 11.1.0.1.0 Copyright (c) 1996, 2010 Oracle ...
  • repo upload 提示 no branches ready for upload

    千次阅读 2019-07-30 21:43:42
    1.repo upload 提示 no branches ready for upload https://blog.csdn.net/jinbaippdpdpdpdpd/article/details/74837987 2.repo: no branches ready for upload http://www.voidcn.com/article/p-pofzamuv-ga.html ...
  • s3obj.upload(params,options). on('httpUploadProgress', function(evt) { console.log("Uploaded : " + parseInt((evt.loaded * 100) / evt.total)+'%'); }).send(function(err, data) { if ...
  • 构建版本 Upload to App Store

    千次阅读 2016-09-30 16:54:04
    上传App Store之前要确保以下几件事: App 的General–>Bundle Identifier要和描述文件中关联的App ID 保持对应 App 的General–>Version要和iTunes Connect中的版本保持一致 修改Build Settings中的Code Signing ...

空空如也

1 2 3 4 5 ... 20
收藏数 152,007
精华内容 60,802
关键字:

upload