圖片上傳及圖片處理-----後端技術棧
1.前言
前面兩節我們跟新了圖片上傳的前端知識。沒看的小夥伴可以返回去看看。
圖片上傳及圖片處理—–前端技術棧
圖片上傳及圖片處理—–5+runtime技術棧
現在,我們要做的就是後端伺服器處理圖片。
一般來說,對於一張圖片。他可能在手機端,平板電腦端以及pc端進行展示。有可能以列表形式展示,也有可能以詳情圖展示,對於不同的展示方式。我們應該給與不同大小的圖片進行展示。這樣做,有以下幾個好處。
- 提高傳輸效率
- 節省使用者流量
- 減輕客戶端渲染的壓力(對於手機端,如果全是幾百kb以上的圖片。在低端安卓機上。真的卡的不行)
基於以上幾點,我們可以按照用途把圖片劃分為以下幾個尺寸(本節主要將等寬比例壓縮,當然你也可以試試其他的)
- 寬度250(20kb左右)——適用於手機橫向展示2張以上的圖片(比如列表展示)
- 寬度550(60kb左右)——適用於手機橫向單圖、平板電腦端橫向2圖、pc端橫向4圖
- 寬度1000(150kb左右)——適用於手機圖片單張詳情預覽、平板橫向單張展示、平板圖片詳情、pc端圖片詳情
- 寬度2000(350kb左右)——適用於平板電腦單張詳情(不常用)、pc端巨幕<該類為了增加上傳速度可單獨用作判斷>
- 原圖——適用於對圖片質量要求很高的攝影繪畫等等的下載<不常用,平臺無原圖下載功能建議不用>
基於這樣的構思我們來構思實現程式碼邏輯
- 拿到前端傳過來的檔案
- 如果圖片大小滿足壓縮按照比例壓縮圖片
- 獲取壓縮圖片的輸出流
- 輸出到本地路徑或者遠端伺服器
廢話不多說了,就這個邏輯。上程式碼。
- 從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()即可
- 使用三方物件儲存服務
當前三方比較流行的有阿里雲物件儲存,七牛雲物件儲存,騰訊雲物件儲存等。他們可用於存任何的檔案(我其實一直在考慮要不要用來開闢一塊自己的網盤)。該程式碼借用人人開原始碼整合做了一些修改。大致步驟有以下幾個。
- 寫配置類載入配置
- 工廠方法呼叫上傳呼叫
- 在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>
分別整合阿里雲,七牛雲,以及騰訊雲
阿里雲端儲存服務
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/