2. 程式人生 > >圖片上傳及圖片處理-----後端技術棧

圖片上傳及圖片處理-----後端技術棧

阿新 • • 發佈：2019-01-19

1.前言
前面兩節我們跟新了圖片上傳的前端知識。沒看的小夥伴可以返回去看看。
圖片上傳及圖片處理—–前端技術棧
圖片上傳及圖片處理—–5+runtime技術棧
現在，我們要做的就是後端伺服器處理圖片。
一般來說，對於一張圖片。他可能在手機端，平板電腦端以及pc端進行展示。有可能以列表形式展示，也有可能以詳情圖展示，對於不同的展示方式。我們應該給與不同大小的圖片進行展示。這樣做，有以下幾個好處。

  1. 提高傳輸效率
  2. 節省使用者流量
  3. 減輕客戶端渲染的壓力（對於手機端，如果全是幾百kb以上的圖片。在低端安卓機上。真的卡的不行）

基於以上幾點，我們可以按照用途把圖片劃分為以下幾個尺寸（本節主要將等寬比例壓縮，當然你也可以試試其他的）

  1. 寬度250(20kb左右)——適用於手機橫向展示2張以上的圖片（比如列表展示）
  2. 寬度550(60kb左右)——適用於手機橫向單圖、平板電腦端橫向2圖、pc端橫向4圖
  3. 寬度1000(150kb左右)——適用於手機圖片單張詳情預覽、平板橫向單張展示、平板圖片詳情、pc端圖片詳情
  4. 寬度2000(350kb左右)——適用於平板電腦單張詳情(不常用)、pc端巨幕<該類為了增加上傳速度可單獨用作判斷>
  5. 原圖——適用於對圖片質量要求很高的攝影繪畫等等的下載<不常用，平臺無原圖下載功能建議不用>

基於這樣的構思我們來構思實現程式碼邏輯

  1. 拿到前端傳過來的檔案
  2. 如果圖片大小滿足壓縮按照比例壓縮圖片
  3. 獲取壓縮圖片的輸出流
  4. 輸出到本地路徑或者遠端伺服器

廢話不多說了，就這個邏輯。上程式碼。

  • 從file中按照250,550,1000,2000，原圖五個方式獲得輸出流
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.multipart.MultipartFile;

import javax.imageio.IIOImage;
import javax.imageio.ImageIO;
import javax.imageio.ImageWriteParam;
import javax.imageio.ImageWriter;
import
 
 java.awt.*;
import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;

public class CompressUtils {
    private static Logger log = LoggerFactory.getLogger(CompressUtils.class);
    /**
     * 獲取寬250返回流(手機列表圖)
     * @param file
     * @return
     */
    public static InputStream getMinInputStream(MultipartFile file){
        if (file == null) {
            log.error("檔案不能為空:CompressUtils.getMinInputStream");
            return null;
        }
        return handPicture(file,250);
    }
    /**
     * 獲取寬550返回流(手機詳情圖)
     * @param file
     * @return
     */
    public static InputStream getMiddleInputStream(MultipartFile file){
        if (file == null) {
            log.error("檔案不能為空:CompressUtils.getMiddleInputStream");
            return null;
        }
        return handPicture(file,550);
    }

    /**
     * 獲取寬1000返回流(pad詳情圖)
     * @param file
     * @return
     */
    public static InputStream getMaxInputStream(MultipartFile file){
        if (file == null) {
            log.error("檔案不能為空:CompressUtils.getMaxInputStream");
            return null;
        }
        return handPicture(file,1000);
    }
    /**
     * 獲取寬2000返回流(pc詳情圖)
     * @param file
     * @return
     */
    public static InputStream getSupperInputStream(MultipartFile file){
        if (file == null) {
            log.error("檔案不能為空:CompressUtils.getSupperInputStream");
            return null;
        }
        return handPicture(file,2000);
    }
    /**
     * 獲取原圖返回流
     * @param file
     * @return
     */
    public static InputStream getOrginInputStream(MultipartFile file){
        if (file == null) {
            log.error("檔案不能為空:CompressUtils.getOrginInputStream");
            return null;
        }
        try {
            return getPictureInputStream(ImageIO.read(file.getInputStream()),0,0);
        } catch (IOException e) {
            log.error("檔案io異常:CompressUtils.getOrginInputStream");
            return null;
        }
    }

    private static InputStream handPicture(MultipartFile file,Integer width){
        try {
            InputStream inputStream = file.getInputStream();
            BufferedImage bufImg=ImageIO.read(inputStream);
            Integer w = bufImg.getWidth(null);
            if(width>w) return getPictureInputStream(bufImg,0,0);
            return getPictureInputStream(bufImg,width,0);
        } catch (IOException e) {
            log.error("檔案io異常:CompressUtils.handPicture");
            return null;
        }
    }
    private static InputStream getPictureInputStream(BufferedImage bufImg, int width, int height) {
        try {
            Integer w = bufImg.getWidth(null);
            Integer h = bufImg.getHeight(null);
            double bili;
            if(width>0){
                bili=width/(double)w;
                height = (int) (h*bili);
            }else{
                if(height>0){
                    bili=height/(double)h;
                    width = (int) (w*bili);
                }else{
                    height=h;
                    width =w;
                }
            }

            // 獲得快取流
            BufferedImage newBufferedImage  = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            newBufferedImage .getGraphics().drawImage(bufImg.getScaledInstance(width, height, Image.SCALE_SMOOTH), 0, 0, null);

            // 指定寫圖片的方式為 jpg
            ImageWriter imgWriter = ImageIO.getImageWritersByFormatName("jpg").next();
            ImageWriteParam imgWriteParams = new javax.imageio.plugins.jpeg.JPEGImageWriteParam(null);
            // 獲取流
            ByteArrayOutputStream bos = new ByteArrayOutputStream();
            imgWriter.reset();
            imgWriter.setOutput(ImageIO.createImageOutputStream(bos));
            imgWriter.write(null, new IIOImage(newBufferedImage, null, null), imgWriteParams);

            // 轉換為輸出流
            InputStream inputStream = new ByteArrayInputStream(bos.toByteArray());
            inputStream.close();
            return  new ByteArrayInputStream(bos.toByteArray());
        } catch (IOException e) {
            log.error("圖片壓縮io異常:CompressUtils.getPictureInputStream<==>"+e.getMessage());
            return null;
        }
    }
}
  • 使用傳統方法將圖片寫在本地
   /**
     * 將InputStream寫入本地檔案
     * @param input 輸入流
     * @throws IOException
     */
    private static String writeToLocal(String destination,InputStream input) throws IOException {
        int index;
        byte[] bytes = new byte[1024];
        FileOutputStream downloadFile = new FileOutputStream(destination);
        while ((index = input.read(bytes)) != -1) {
            downloadFile.write(bytes, 0, index);
            downloadFile.flush();
        }
        downloadFile.close();
        input.close();
    }
    /**
     * web伺服器儲存圖片路徑
     */
    public static String createPath(){
         String minUrl= UUID.randomUUID().toString().replace("-","");
         Calendar cale = Calendar.getInstance(); 
         int year =cale.get(Calendar.YEAR);
         int month = cale.get(Calendar.MONTH) + 1;
         int day = cale.get(Calendar.DATE);    
         String pname=year+"y"+month+"/"+day+"/"+minUrl+".jpg";      
         String path ="/pictures/"+ pname
         return path;
    }
    public static void main(String[] args) {
        // 亂寫的後期來源於前端檔案
        MultipartFile file =new MultipartFile ();
        // 1.路徑寫死
        String minUrl= UUID.randomUUID().toString().replace("-","");
        writeToLocal("E/ehu/src/main/java/resource/pictures/"+minUrl+".jpg",getOrginInputStream(file));
        // 2.使用相對路徑
        String path =createPath();
        writeToLocal(request.getContextPath()+path,getOrginInputStream(file));      
    }

其中 input 用第一個方法獲得。destination一般採用配置檔案路徑+UUID自動生成+”.jpg”字尾。
如上所示main檔案寫好後，destination為寫死的。這樣做，讀取檔案可能麻煩一些。我們可以使用獲取專案資原始檔路徑，從而把圖片寫在資原始檔夾+按照年+月份分第一層包+按照日期分第二層包+檔名稱。具體方式見上面程式碼createPath()方法。這樣在前端獲取圖片檔案資源的時候。只需要加上伺服器ip+專案埠號（預設80,可不寫）+專案名稱（一般配置為省略）+createPath()即可

  • 使用三方物件儲存服務

當前三方比較流行的有阿里雲物件儲存，七牛雲物件儲存，騰訊雲物件儲存等。他們可用於存任何的檔案（我其實一直在考慮要不要用來開闢一塊自己的網盤）。該程式碼借用人人開原始碼整合做了一些修改。大致步驟有以下幾個。

  1. 寫配置類載入配置
  2. 工廠方法呼叫上傳呼叫
    1. 在pom中引入三方jar包
<properties>
        <qiniu-version>[7.2.0, 7.2.99]</qiniu-version>
        <aliyun-oss-version>2.5.0</aliyun-oss-version>
        <qcloud-cos-version>4.4</qcloud-cos-version>
</properties>
<dependencies>
       <dependency>
           <groupId>com.qiniu</groupId>
           <artifactId>qiniu-java-sdk</artifactId>
           <version>${qiniu-version}</version>
       </dependency>
       <dependency>
           <groupId>com.aliyun.oss</groupId>
           <artifactId>aliyun-sdk-oss</artifactId>
           <version>${aliyun-oss-version}</version>
       </dependency>
       <dependency>
           <groupId>com.qcloud</groupId>
           <artifactId>cos_api</artifactId>
           <version>${qcloud-cos-version}</version>
       </dependency>
 </dependencies>

  1. 分別整合阿里雲，七牛雲，以及騰訊雲

    阿里雲端儲存服務

import com.aliyun.oss.OSSClient;
import com.hannan.ehu.common.exception.RRException;

import java.io.ByteArrayInputStream;
import java.io.InputStream;

/**
 * 阿里雲端儲存
 */
public class AliyunCloudStorageService extends CloudStorageService {
    private OSSClient client;

    public AliyunCloudStorageService(CloudStorageConfig config){
        this.config = config;
        //初始化
        init();
    }

    private void init(){
        client = new OSSClient(config.getAliyunEndPoint(), config.getAliyunAccessKeyId(),
                config.getAliyunAccessKeySecret());
    }

    @Override
    public String upload(byte[] data, String path) {
        return upload(new ByteArrayInputStream(data), path);
    }

    @Override
    public String upload(InputStream inputStream, String path) {
        try {
            client.putObject(config.getAliyunBucketName(), path, inputStream);
        } catch (Exception e){
            throw new RRException("上傳檔案失敗，請檢查配置資訊", e);
        }

        return config.getAliyunDomain() + "/" + path;
    }

    @Override
    public String uploadSuffix(byte[] data, String suffix) {
        return upload(data, getPath(config.getAliyunPrefix(), suffix));
    }

    @Override
    public String uploadSuffix(InputStream inputStream, String suffix) {
        return upload(inputStream, getPath(config.getAliyunPrefix(), suffix));
    }
}

騰訊雲端儲存服務

import com.hannan.ehu.common.exception.RRException;
import com.qcloud.cos.COSClient;
import com.qcloud.cos.ClientConfig;
import com.qcloud.cos.request.UploadFileRequest;
import com.qcloud.cos.sign.Credentials;
import net.sf.json.JSONObject;
import org.apache.commons.io.IOUtils;

import java.io.IOException;
import java.io.InputStream;

/**
 * 騰訊雲端儲存
 */
public class QcloudCloudStorageService extends CloudStorageService {
    private COSClient client;

    public QcloudCloudStorageService(CloudStorageConfig config){
        this.config = config;
        //初始化
        init();
    }

    private void init(){
        Credentials credentials = new Credentials(config.getQcloudAppId(), config.getQcloudSecretId(),
                config.getQcloudSecretKey());

        //初始化客戶端配置
        ClientConfig clientConfig = new ClientConfig();
        //設定bucket所在的區域，華南：gz 華北：tj 華東：sh
        clientConfig.setRegion(config.getQcloudRegion());

        client = new COSClient(clientConfig, credentials);
    }

    @Override
    public String upload(byte[] data, String path) {
        //騰訊雲必需要以"/"開頭
        if(!path.startsWith("/")) {
            path = "/" + path;
        }

        //上傳到騰訊雲
        UploadFileRequest request = new UploadFileRequest(config.getQcloudBucketName(), path, data);
        String response = client.uploadFile(request);

        JSONObject jsonObject = JSONObject.fromObject(response);
        if(jsonObject.getInt("code") != 0) {
            throw new RRException("檔案上傳失敗，" + jsonObject.getString("message"));
        }

        return config.getQcloudDomain() + path;
    }

    @Override
    public String upload(InputStream inputStream, String path) {
        try {
            byte[] data = IOUtils.toByteArray(inputStream);
            return this.upload(data, path);
        } catch (IOException e) {
            throw new RRException("上傳檔案失敗", e);
        }
    }

    @Override
    public String uploadSuffix(byte[] data, String suffix) {
        return upload(data, getPath(config.getQcloudPrefix(), suffix));
    }

    @Override
    public String uploadSuffix(InputStream inputStream, String suffix) {
        return upload(inputStream, getPath(config.getQcloudPrefix(), suffix));
    }
}

七牛雲端儲存

import com.hannan.ehu.common.exception.RRException;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.util.Auth;
import org.apache.commons.io.IOUtils;

import java.io.IOException;
import java.io.InputStream;

/**
 * 七牛雲端儲存
 */
public class QiniuCloudStorageService extends CloudStorageService {
    private UploadManager uploadManager;
    private String token;

    public QiniuCloudStorageService(CloudStorageConfig config){
        this.config = config;
        //初始化
        init();
    }

    private void init(){
        uploadManager = new UploadManager(new Configuration(Zone.autoZone()));
        token = Auth.create(config.getQiniuAccessKey(), config.getQiniuSecretKey()).
                uploadToken(config.getQiniuBucketName());
    }

    @Override
    public String upload(byte[] data, String path) {
        try {
            Response res = uploadManager.put(data, path, token);
            if (!res.isOK()) {
                throw new RuntimeException("上傳七牛出錯：" + res.toString());
            }
        } catch (Exception e) {
            throw new RRException("上傳檔案失敗，請核對七牛配置資訊", e);
        }
        return config.getQiniuDomain() + "/" + path;
    }

    @Override
    public String upload(InputStream inputStream, String path) {
        try {
            byte[] data = IOUtils.toByteArray(inputStream);
            return this.upload(data, path);
        } catch (IOException e) {
            throw new RRException("上傳檔案失敗", e);
        }
    }

    @Override
    public String uploadSuffix(byte[] data, String suffix) {
        return upload(data, getPath(config.getQiniuPrefix(), suffix));
    }

    @Override
    public String uploadSuffix(InputStream inputStream, String suffix) {
        return upload(inputStream, getPath(config.getQiniuPrefix(), suffix));
    }
}

公共介面服務

import org.apache.commons.lang.StringUtils;

import java.io.InputStream;
import java.util.Date;
import java.util.UUID;

/**
 * 雲端儲存(支援七牛、阿里雲、騰訊雲)
 */
public abstract class CloudStorageService {
    /** 雲端儲存配置資訊 */
    CloudStorageConfig config;

    /**
     * 檔案路徑
     * @param prefix 字首
     * @param suffix 字尾
     * @return 返回上傳路徑
     */
    public String getPath(String prefix, String suffix) {
        //生成uuid
        String uuid = UUID.randomUUID().toString().replaceAll("-", "");
        //檔案路徑
        String path = DateUtils.format(new Date(), "yyyyMMdd") + "/" + uuid;

        if(StringUtils.isNotBlank(prefix)){
            path = prefix + "/" + path;
        }

        return path + suffix;
    }

    /**
     * 檔案上傳
     * @param data    檔案位元組陣列
     * @param path    檔案路徑，包含檔名
     * @return        返回http地址
     */
    public abstract String upload(byte[] data, String path);

    /**
     * 檔案上傳
     * @param data     檔案位元組陣列
     * @param suffix   字尾
     * @return         返回http地址
     */
    public abstract String uploadSuffix(byte[] data, String suffix);

    /**
     * 檔案上傳
     * @param inputStream   位元組流
     * @param path          檔案路徑，包含檔名
     * @return              返回http地址
     */
    public abstract String upload(InputStream inputStream, String path);

    /**
     * 檔案上傳
     * @param inputStream  位元組流
     * @param suffix       字尾
     * @return             返回http地址
     */
    public abstract String uploadSuffix(InputStream inputStream, String suffix);
}

配置類

package com.hannan.ehu.common.cloud;

import lombok.Data;
import org.hibernate.validator.constraints.Range;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

import java.io.Serializable;

/**
 * 雲端儲存配置資訊
 */
@Component
@Data
public class CloudStorageConfig implements Serializable {
    private static final long serialVersionUID = 1L;

    //型別 1：七牛  2：阿里雲  3：騰訊雲
    @Range(min=1, max=3, message = "型別錯誤")
    @Value("${cloudStorageConfig.type}")
    private Integer type;

    //七牛繫結的域名
    @Value("${cloudStorageConfig.qiniuDomain}")
    private String qiniuDomain;
    //七牛路徑字首
    @Value("${cloudStorageConfig.qiniuPrefix}")
    private String qiniuPrefix;
    //七牛ACCESS_KEY
    @Value("${cloudStorageConfig.qiniuAccessKey}")
    private String qiniuAccessKey;
    //七牛SECRET_KEY
    @Value("${cloudStorageConfig.qiniuSecretKey}")
    private String qiniuSecretKey;
    //七牛儲存空間名
    @Value("${cloudStorageConfig.qiniuBucketName}")
    private String qiniuBucketName;

    //阿里雲繫結的域名
    private String aliyunDomain;
    //阿里雲路徑字首
    private String aliyunPrefix;
    //阿里雲EndPoint
    private String aliyunEndPoint;
    //阿里雲AccessKeyId
    private String aliyunAccessKeyId;
    //阿里雲AccessKeySecret
    private String aliyunAccessKeySecret;
    //阿里雲BucketName
    private String aliyunBucketName;

    //騰訊雲繫結的域名
    private String qcloudDomain;
    //騰訊雲路徑字首
    private String qcloudPrefix;
    //騰訊雲AppId
    private Integer qcloudAppId;
    //騰訊雲SecretId
    private String qcloudSecretId;
    //騰訊雲SecretKey
    private String qcloudSecretKey;
    //騰訊雲BucketName
    private String qcloudBucketName;
    //騰訊雲COS所屬地區
    private String qcloudRegion;
}

日期工具類

package com.hannan.ehu.common.cloud;

import java.text.SimpleDateFormat;
import java.util.Date;

/**
 * 日期處理
 * 
 * @author chenshun
 * @email [email protected]
 * @date 2016年12月21日 下午12:53:33
 */
public class DateUtils {
    /** 時間格式(yyyy-MM-dd) */
    public final static String DATE_PATTERN = "yyyy-MM-dd";
    /** 時間格式(yyyy-MM-dd HH:mm:ss) */
    public final static String DATE_TIME_PATTERN = "yyyy-MM-dd HH:mm:ss";

    public static String format(Date date) {
        return format(date, DATE_PATTERN);
    }

    public static String format(Date date, String pattern) {
        if(date != null){
            SimpleDateFormat df = new SimpleDateFormat(pattern);
            return df.format(date);
        }
        return null;
    }
}

工廠類

package com.hannan.ehu.common.cloud;

/**
 * 檔案上傳Factory
 * @author chenshun
 * @email [email protected]
 * @date 2017-03-26 10:18
 */
public final class OSSFactory {
    private static Interger QINIU_Cloud = 1;
    private static Interger ALIYUN_Cloud = 2;
    private static Interger QCLOUD_Cloud = 3;
    public static CloudStorageService build(CloudStorageConfig config){
        if(config.getType() == QINIU_Cloud ){
            return new QiniuCloudStorageService(config);
        }else if(config.getType() == ALIYUN_Cloud){
            return new AliyunCloudStorageService(config);
        }else if(config.getType() == QCLOUD_Cloud){
            return new QcloudCloudStorageService(config);
        }
        return null;
    }
}

呼叫檔案上傳

 @Autowired
 private CloudStorageConfig config;
@ApiOperation(value = "上傳圖片", notes = "code 200 成功,返回所有大小圖片的地址")
    @PostMapping("/uploadPicture")
    public R uploadPicture(@RequestBody MultipartFile file) {
        String minUrl=OSSFactory.build(config).uploadSuffix(CompressUtils.getMinInputStream(file),".jpg");
        String midUrl =OSSFactory.build(config).uploadSuffix(CompressUtils.getMiddleInputStream(file),".jpg");
        String maxUrl =OSSFactory.build(config).uploadSuffix(CompressUtils.getMaxInputStream(file),".jpg");
        String supperUrl =OSSFactory.build(config).uploadSuffix(CompressUtils.getSupperInputStream(file),".jpg");
        String oriUrl =OSSFactory.build(config).uploadSuffix(CompressUtils.getOrginInputStream(file),".jpg");
        return R.ok(oriUrl).put("maxUrl",maxUrl).put("midUrl",midUrl).put("minUrl",minUrl).put("supperUrl",supperUrl);
    }

到此三方上傳完結。

相關推薦

圖片上傳及圖片處理-----後端技術棧

1.前言 前面兩節我們跟新了圖片上傳的前端知識。沒看的小夥伴可以返回去看看。 圖片上傳及圖片處理—–前端技術棧 圖片上傳及圖片處理—–5+runtime技術棧 現在，我們要做的就是後端伺服器處理圖片。 一般來說，對於一張圖片。他可能在手機端，平板電腦端

圖片上傳並回顯後端篇

save a13 標簽設置 seek resp nal png mov tin 圖片上傳並回顯後端篇 我們先看一下效果 繼上一篇的圖片上傳和回顯，我們來實戰一下圖片上傳的整個過程，今天我們將打通前後端，我們來真實的了解一下，我們上傳的文件，是以什麽樣的形式上傳到服務器，難

Vue2.0圖片上傳及圖片壓縮自定義H5圖片上傳元件

最近公司要求圖片上傳需要壓縮，以前直接使用元件不能滿足使用了，於是決定自定義個圖片上傳元件。可以實現動態傳入url，設定壓縮率，接收回傳引數。 壓縮也質量還不錯。先上效果圖效果如下壓縮質量還不錯，4.37M到550k 壓縮率更是達到了87% ，這省了不少流量和伺服器硬碟啊，哈

圖片上傳oss--先拿server端簽名再上傳oss，返回id值

access tro 常用方法 -1 跨域問題 lba hub 指點 sage 目前項目oss阿裏雲存儲圖片，圖片上傳主要步驟是：前端從服務端拿到簽名signature，再上傳到oss上busket裏，上傳成功返回圖片id （imgId），最後再給server端； 註

關於springboot專案jar包執行時圖片上傳及顯示問題

spring boot打成jar包後（比如jar的名字叫a.jar），執行時輸入命令： java -jar  d:\a.jar 就可以運行了。那麼程式中要求的比較大的圖片檔案將如何辦呢？ 只需要將它們同時放在與jar包相同的檔案路經下就可以，但圖片資料夾的名字不能隨便取哦！因為

用原生JS實現多張圖片上傳及預覽功能（相容IE8）

最近需要做一個圖片上傳預覽的功能（相容IE8-11、chrome、firefox等瀏覽器），網上現有的檔案上傳元件（如webuploader）總是會遇到一些相容性問題。於是我參考了一些博文（連結找不到了⊙o⊙…），自己用原生JS寫了一個支援多張圖片上傳預覽功能的Demo 先通過最終效果看一下功能：

HTML5 APP應用實現圖片上傳及拍照上傳功能

HTMl5 APP手機端程式碼：   <video id="myVideo" autoplay="autoplay"></video> <br /> <input type="button" value="拍照" />

Java伺服器部署基於OpenCV的C++影象處理專案（三）圖片上傳並返回處理圖

Java伺服器部署基於OpenCV的C++影象處理專案（三）圖片上傳並返回處理圖 1.上傳圖片並返回灰度圖功能 由於使用的springboot開發，直接寫一個upload介面供圖片上傳，以下是springboot主函式以及upload介面。 package com.e

js圖片上傳及顯示

html部分： <form action='' method='post' name='myform'> <input type='file' id='iptfileupload' onchange='show()' value='' /> <img src='1.jpg' a

vue+axios+vuetify 執行圖片上傳及預覽功能

上傳前 上傳後 html <v-img :src="photoSrc?photoSrc:`${baseUrl}images/photoFile.jpg`" aspect-ratio="0.8" v-if="change" &g

vue圖片上傳元件，包括base64、二進位制上傳及圖片旋轉

       最近做的vue專案中好多涉及到圖片上傳的，為了方便開發就進行了相關總結。因為公司有好多專案，並且使用的是不同後臺語言，有的需要通過base64字串傳遞，有的需要轉換成二進位制資料流傳遞，有的可以直接使用from表單進行提交。後來有涉及到ios上拍照圖片會旋轉的問

vue+elementUI表單和圖片上傳及驗證

<template>     <div class="add-keyperson-dialog">       <el-form :inline="true"                ref="addKeyPersonForm"                :model=

使用js和jquery實現點選圖片上傳及預覽

//上傳頭像 $(".avator-btn-fake").click(function(){ $("#upload").click(); }); $("#upload").change(function(){ var

移動端壓縮圖片,上傳獲取圖片並壓縮-lrz.all.bundle.js外掛

這幾天公司有一個換綁銀行卡的需求，就用上傳圖片的功能（上傳身份證和銀行卡），然後我百度了一下，綜合了網上的資料搞定了，現在我把自己的經驗分享給大家一下 首先呢，我們是引用外掛的，那肯定是要把外掛下載下來，然後進行引用的，下載的地址https:/

Kindeditor 圖片上傳及多圖片上傳不支援jsp

    jsp網站在匯入Kindeditor文字編輯器後，圖片上傳功能完全無效。原因是：imageUploadJson及fileManagerJson的引數設定錯誤，imageUploadJson的預設引數是呼叫'../../upload_json.php'，fileManagerJson的預設引數是呼叫

Vue專案整合ueditor。解決圖片上傳及跨域問題

1：下載ueditor下來，放在vue專案中的static資料夾下2：建立ueditor編輯介面3：椰~~~~~此時已經可以使用了但是你會發現（黑人臉）what the fuck？？？？？？？？？？看下面    如果你只是搞前端介面，那就到此結束不用往下看了，剩下的是給苦逼後

angularjs 實現多個圖片上傳及預覽

ict red input 刪除按鈕 cto ges pat ack actor 1 <div class="form-group"> 2 <label>上傳申請單</label> 3

海量圖片上傳及儲存方案

一、常規圖片儲存策略 　　常規的一般400G以下的圖片儲存可以採用比較傳統的分目錄的形式 　　例如目錄層級為  年份/行業屬性/月份/日期/使用者屬性 　　有幾個比較重要的原則就是 　　1、單個目錄下的檔案個數不要超過2000個，多了定址較慢 　　2、目錄層級結構不要太深，這樣伺服器處理定址較慢 二

thinkphp 多圖片上傳 單圖片上傳

http json 多圖片上傳 模板 tar err ram mbo htm 不管是單圖片上傳還是多圖片上傳都必須要引用這兩個js 下載地址 鏈接：http://pan.baidu.com/s/1eStkUt0 密碼：asvo <script src="Public

php把 圖片上傳到 圖片服務器

str sting exec pen pan 允許 _id ont scrip 圖片服務器代碼 <?php /** * 圖片服務器上傳API接口 * by Zx * date 2016-04-28 */ header(‘Content-type:text/